当其中一个点击事件已经在 jQuery 中运行时，如何阻止其他点击事件运行？

Question

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

问题是，当我next非常快速地单击按钮（例如两次）时，在第一个事件完成之前，将执行第二个事件，因此不到一秒钟，我就会在页面中看到两个图像。

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