如何防止其他点击事件运行，而其中一个已经在jQuery中运行

Question

我正在编写一个简单的带有previous和next按钮的渐变幻灯片。

问题是，当我点击next按钮非常快(例如2次)，在第一个事件完成之前，第二个事件将被执行，所以在不到一秒钟的时间里，我将在我的页面上看到两个图像。

    $("#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;");
            });
        });
    });

• 在最后一行，在fadeIn()之后，我甚至试图隐藏除当前图像之外的所有内容，希望问题将得到解决，但这不起作用。

• 我读了一些关于event.stopImmediatePropagation()的东西，但是我不能使用它，或者它不是我的解决方案。

如何强制jQuery忽略执行任何类似的事件，在其中一个相同的事件，完成之前?

Answer 1

你可以添加一个标志来指示你的滑块何时处于过渡状态:

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事件监听器?