How to stop click events from queuing up on multiple click?

Question

What I need to achieve is if we click on submit button, there is particular div should show up. Here is my code: http://jsfiddle.net/7tn5d/ But if I click on submit button multiple times, the function calls sort of queue up and run one after other. Is there a way to invalidate other onclicks when current animation is running? Code:

 animating = 0;
    doneanim = 0;
    $(function () {
        $("#submit_tab").click(function (e) {
            if (animating == 1) return;
            animating = 1;
            $("#submit_cont").show("blind", {}, 1000);
            animating = 0;
        });
    });

Answer 1

You almost got it right with the semaphore! It's just that, in jQuery's show(), you would have to put the semaphore reset as an argument. Here's the fixed version - http://jsfiddle.net/snikrs/xe5A3/

animating = 0;
doneanim = 0;
$(function () {
    $("#submit_tab").click(function (e) {
        if (animating == 1) return;
        animating = 1;
        $("#submit_cont").show("blind", 1000, function() {
            animating = 0;
        });
    });
});

Answer 2

To prevent it from performing the action multiple times, simple cease the previous animation. So:

$('#submit_cont').stop().show("blind",{},1000);

However, I have noticed that you have attempted to prevent the animation from running, if an animation is already running. Although it takes 1 second or 1000 milliseconds to show the div, the execution of the condition does not pause until the animation is complete. You must define a function to run after the animation is complete, like so:

animating = 0;
doneanim = 0;
$(function () {
    $("#submit_tab").click(function (e) {
        if (animating == 1) return;
        animating = 1;
        $("#submit_cont").show("blind", 1000, function() { animation = 0; });
    });
});

Hope that helped...

Answer 3

You can use the :animated selector to check:

$(function () {
    $("#submit_tab").click(function (e) {
        var $cont = $("#submit_cont");
        if (!$cont.is(':animated')) {
           $cont.show("blind", {}, 1000);
        }
    });
});

Now if you stick with the external semaphore idea then its better to stick that on the elemnt with .data() instead of using a global variable:

$(function () {
    $("#submit_tab").click(function (e) {
        var $cont = $('#submit_cont'),
            animating = $cont.data('isAnimating');
        if (animating) {
           return;
        } else {
          $cont.data('isAnimating', 1);
          $("#submit_cont").show("blind", 1000, function() { $cont.data('isAnimating', 0); });
        }
    });
});

Answer 4

Something like this (see documentation) :)

$("#submit_cont").show("blind", function(){
    animating = 0;
});

Answer 5

You can add a $("#submit_cont").clearQueue(); after the animation finished :

 $("#submit_tab").click(function (e) {
     $("#submit_cont").show("blind", 1000, function() {
         $("#submit_cont").clearQueue();
     });
 });

Updated JSFiddle

Answer 6

I found a different solution for this, which in my opinion looks cleaner:

var tab = $("submit_tag");
tab.on("click", function(){
    var cont = $("submit_cont");
    var animating = tab.queue("fx").length;
    if(animating === 0){
        cont.show("blind", {}, 1000);
    }
});