having jquery events only work after 400 ms

Question

I have create an event on click

$('#next').bind('click', function(e) {
 //my animation event
});

the animations lasts for 400 ms - so i don't want th user to be able to click the next button until the animation finishes. is there a way to make the event handler inaccessible for 400 ms after the event fires?

Im sorry if this is obvious, but i struggled coming up with a google search. Maybe I'm missing some terminology.

Thanks everybody :)

Answer 1

you can do like this:

 var clickFlag=false; 
    $('#next').bind('click', function(e) {
  if(clickFlag==true)
      return;
  clickFlag=true;

  //my animation event

     setTimeout(function(){
     clickFlag=false;
       },400);
});

this may help you :)

Answer 2

Simply define a Boolean variable which you can set to true or false depending on whether the animation is currently happening or not:

var isAnimating = false;

$('#next').on('click', function() {
    // If the Boolean variable is set to true, prevent further execution
    if (isAnimating)
        return;

    // Set the Boolean variable to true
    isAnimating = true;

    // Animate for 400ms
    $(...).animate({
        ...
    }, 400, function() {
        // Set the Boolean variable to false after the animation completes
        isAnimating = false;
    });
});