How to prevent other click events from running while one of them is already running in jQuery?

Question

I am writing a simple fade-slideshow with previous and next buttons.

The problem is that when I click the next button very quickly (for example 2 times), before the first event finished, the second one will be executed, so for less than a second I will see, two images in my page.

    $("#next_button").click(function (){
        $("#slide"+current_slide).fadeOut(FADE_DURATION, function () {
            current_slide ++;
            current_slide = current_slide % slides_number;
            $("#slide"+current_slide).fadeIn(FADE_DURATION, function (){
                $(".slide_image").not("#slide"+current_slide).attr("style", "display: none;");
            });
        });
    });

• In the last line, after fadeIn() , I even tried to hide everything except current image, wishing the issue will be solved, but that doesn't work.

• I read something about event.stopImmediatePropagation() but I couldn't use it, or maybe it wasn't my solution.

How to force jQuery to ignore executing any similar events, before one of those same events, get finished?

Answer 1

You can add a flag that indicates when your slider is in the middle of transitioning:

var isSliding = false;

$("#next_button").click(function (){

  if(isSliding) {
    return false;
  }

  isSliding = true;

    $("#slide"+current_slide).fadeOut(FADE_DURATION, function () {
        current_slide ++;
        current_slide = current_slide % slides_number;
        $("#slide"+current_slide).fadeIn(FADE_DURATION, function (){
            $(".slide_image").not("#slide"+current_slide).attr("style", "display: none;");

            isSliding = false;
        });
    });
});

Answer 2

您可以绑定和解除绑定，但是如果重复很多次，这很费时间，如果您多次重复尝试，请尝试查看此答案： jQuery-在事件发生后如何临时禁用onclick事件监听器被解雇了？