Search code examples
javascriptjqueryhtmldhtml

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


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;
        });
    });

Solution

  • 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;
            });
        });
    });