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

Question

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

javascriptjqueryeventsevent-handlingclick

5

我正在编写一个简单的淡入淡出幻灯片，带有“上一张”和“下一张”按钮。

问题是当我很快地点击“下一张”按钮（例如，点击两次），在第一个事件完成之前，第二个事件就会被执行，因此在不到一秒的时间内，我会看到页面上的两张图像。

    $("#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忽略在同样的事件完成之前执行任何类似的事件？

- Milad R

2个回答

1

您可以绑定和解除绑定，但如果您经常重复这样做，它会消耗时间。如果您需要执行多次，请尝试查看此答案：jQuery - 如何在事件已被触发后临时禁用onclick事件侦听器？

- Alonline

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mario Pabon · Accepted Answer

您可以添加一个标记，用于指示您的滑块在过渡过程中是否处于中间状态：

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;
        });
    });
});