Jquery Klick-Animation weitermachen, wenn erneut geklickt wird, bevor es vorbei ist

Question

Also habe ich eine Animation für einen Einkaufswagen gemacht, so dass wenn jemand auf "Kaufen" klickt, der Warenkorb öffnet, ein Klon des Produktes erscheint, der Klon verschwindet und Der Wagen schließt sich wieder. Mein Problem ist, dass wenn jemand mehrmals auf die Schaltfläche klickt, die Animation jedes Mal neu gestartet wird. Was ich möchte, ist, dass die Animation normal weiterlaufen würde und wenn der Wagen geöffnet ist, erscheint der Klon von jedem geklicktem Produkt und verschwindet, einer nach dem anderen, und dann schließt sich der Wagen wieder, oder zumindest etwas, das nicht so aussieht Glitchie.

meine 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

Was Sie tun können, ist ein Flag zu setzen (bool) beim Start der Animation, und aus, wenn Animation zu beenden.

Nach dem Klick, bevor Sie die Animation starten, prüfen Sie, ob die Flagge oben ist.

-Code ist wie folgt:

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