1

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>
  • [Here](https://stackoverflow.com/questions/36391972/prevent-multiple-clicks-while-animation-is-ongoing-stoppropagation-animated) is a similar question that did not work despite using [this reply](http://stackoverflow.com/a/29438828/1010918). The error was in the sequence in which the commands were read. I am posting this here so it can help avoid others make the same mistake I did. Thank you. – lowtechsun Apr 03 '16 at 22:56

5 Answers5

2

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;
}
geowa4
  • 40,390
  • 17
  • 88
  • 107
  • thanks for the reply. i tried using .one(). however the $('#button') doesn't work anymore on 2nd click and u can still spam the button with fast clicks. i want to achive something like the toggle in here http://www.mozilla.com/en-US/firefox/update/ even if you spam the button with fast clicks the toggle queue doesn't build up. thanks in advance –  Sep 23 '09 at 00:26
  • did you look up how `one` works? it only works once, hence the name. to make it work for the second click, you have to put it back on. i'll edit to show another solution. – geowa4 Sep 23 '09 at 00:44
  • revised the clickHandler ->> $('#button').one('click', clickHandler); works now, however the i also need to bind toggle handler for switching the image. is this correct? function toggleHandler(evt) { function(){ $(this).find("img").attr('src','img/left.png'); }, function(){ $(this).find("img").attr('src','img/down.png'); } } Thanks. –  Sep 23 '09 at 00:46
  • hi, thanks again for the reply, i got it all working now. :D:D:D –  Sep 23 '09 at 01:00
2

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.

Dmitri Farkov
  • 9,133
  • 1
  • 29
  • 45
2

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

Oriol
  • 11,660
  • 5
  • 35
  • 37
1

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.

Dan F
  • 11,958
  • 3
  • 48
  • 72
0

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