how to prevent click queue build up, using toggle

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

1st Method

Discard event clicks while toggle is animating:

$("#button").click(function(e) {

    e.stopPropagation();

    if ( $(this).next().is(':animated') ) {
        return false;
    }

    $(this).next().toggle("slow");
});

See Demo

2nd Method

Set a time delay to assure only latest click is triggered:

var timeID;

$("#button").click(function(e) {

    var $el = $(this);

    clearTimeout(timeID);

    timeID = setTimeout(function() {
        $el.next().toggle("slow");
    }, 250);    

});

See Demo

Answer 2

there is a issue with toggle method of jquery, when user fastly click on toggle element its sometimes give wrong result. its happening due to timesecond of click event, when first event is not completely finished second event trigger that creates the issue. solution to this is little bit tricky but easy with help of settimeout function :

    $('.navbar-toggle').on('click', function() {
    $('.mob-logo').toggle();
    $('.navbar-toggle').css('pointer-events', 'none');

    setTimeout(function() {
    // enable click after 0.5second
    $('.navbar-toggle').css('pointer-events', 'all');
    }, 500); // 1 second delay
    });

Answer 3

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 4

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 5

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.