how to prevent click queue build up, using toggle in jquery? tried using bind/unbind('click')

Question

i want to disable the click handler when the toggle animation is showing so the animation won't build up because of multiple fast click. thanks

jquery script:

$("#button").click({
    $(this).unbind('click').next().toggle("slow",function(){$('#button').bind('click')});
});

html code

<div
   <a href='#' id='button'>Toggle</a>
   <div>
    test
   </div>
</div>

Answer 1

First off, the way you are attaching events is broken. I don't know if that's just haste in asking the question or a real error in your code, but here's the correct way to set your handler:

$("#button").click(function(evt) { // <- you need to pass it a function!
    $(this).unbind('click').next()
       .toggle("slow",function(){$('#button').bind('click')});
});

But onto your problem. I think that you will benefit from using jQuery's one function. As soon as the click handler is called, it is removed as a click handler; therefore, it only executes once, for one click. To place the click handler back on after the animation, I think you got it right; re-bind it after the animation finishes.

function clickHandler(evt) {
    $(this).next().toggle("slow",
        function() {
            $('#button').bind('click', clickHandler);
        });
}

$("#button").one('click', clickHandler);

If using one is somehow too slow for you, the fastest way would be too add the javascript right on the href of the anchor. But you'll need to switch a global boolean variable when you are ready to execute again.

<a href="javascript:clickHandler(); return false;">...</a>

function clickHandler() {
    if( someBoolean ) {
        someBoolean = false;
        //do stuff
    }
    someBoolean = true;
}

Answer 2

Rather than ignoring the subsequent clicks, you might get some benefit from the stop() method. See Quick Tip: Prevent Animation Queue Buildup for an example. He's talking about hover, but it holds for anywhere that you're likely to run animations one after the other on the same event.

Alternatively, can you disable the button, rather than drop the whole click handler? It probably expresses the intent of "don't click me again" better than dropping the clicks.

Answer 3

As mentioned your implementation of event attachment is broken. On top of that there is a method in jQuery called .stop which releases you from needing to use bind/unbind.

$("#button").click(function(){
    $(this).next().stop().toggle("slow");
});

All it does is clear the animation queue and stops the current animation letting you launch the next one.

Stop function on jQuery docs. Note that it has two properties - clearQueue and goToEnd. Read more about using this method more robustly.