Анимация щелчка JQuery продолжается, если вы нажмете ее еще до того, как она закончится

Question

Итак, я сделал анимацию для корзины покупок, так что когда кто-то нажимает кнопку «купить», открывается корзина для покупок, появляется клон продукта, клон исчезает и тележка снова закрывается. моя проблема в том, что когда кто-то нажимает кнопку несколько раз, анимация начинается каждый раз. я бы хотел, чтобы анимация продолжалась нормально, и когда открыта тележка, клон каждого щелкнутого продукта появляется и исчезает один за другим, а затем тележка снова закрывается или, по крайней мере, что-то, что не выглядит так Glitchy.

мой JQuery:

$("input[name=\"comprar\"]").click(function(event) { 
    //get form values 
    var comprar = $(this).val(); 
    var form = $(this).parents("form"); 
    var cartData = form.serialize() + "&comprar="+ comprar; 
    //submit form ajax 
    if ($("div.minicart").length > 0){ 
     $.ajax({ 
      type: "POST", 
      url: siteurl, 
      data: cartData, 
      success: function(cart){ 
       var target = $(event.target).parents("div.rproducts"); 
       $("div.minicart_container").css({"overflow":"hidden"}); 
       target.clone().insertBefore("div.minicart_container a"); 
       $("div.minicart_container div.rproducts input[type=submit]").css({"display":"none"}); 
       $("div.minicart_container div.rproducts").css({"margin":"10px 30px", "padding":"10px", "background-color":"#ffffff", "border-radius":"10px", "display":"none", "opacity":"0"}); 
       $("div.minicart_container div.rproducts").slideDown(1000); 
       $("div.minicart_container div.rproducts").animate({"opacity": "1"}, 500); 
       $("div.minicart_container div.rproducts").delay(800).animate({"opacity": "0"}, 500); 
       $("div.minicart_container div.rproducts").delay(100).slideUp(1000); 
       setTimeout(function() { 
        $("div.minicart_container div.rproducts").remove(); 
       }, 4000); 
       //refresh cart price 
       var getcart = $(cart).find("div.minicart").html(); 
       $("div.minicart").hide().html(getcart).fadeIn("fast"); 
       //remove clone immediately if button is clicked again 
       $("input[name=\"comprar\"]").click(function(event) { 
        $("div.minicart_container div.rproducts").remove(); 
       }); 
      } 
     }); 
     return false; 
    } 
}); 

Answer 1

Что вы можете сделать, это установить флаг (Ий) на старте анимации, и выключается, когда анимация отделки.

После щелчка перед началом анимации вы проверяете, установлен ли флаг.

код выглядит так:

$("input[name=\"comprar\"]").click(function(event) { 
if(!inAnimation){ 
    inAnimation = true; 
... 
... 
setTimeout(function() { 
        $("div.minicart_container div.rproducts").remove(); 
        inAnimation = false; 
       }, 4000); 
}