如何防止其他点击事件发生运行而其中之一已经是运行在 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 - How can I temporarily disable the onclick event listener after the event has been fired?

如何防止其他点击事件发生运行而其中之一已经是运行在 jQuery 中？

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

javascript

jquery

events

click

event-handling

如何防止其他点击事件发生 运行 而其中之一已经是 运行 在 jQuery 中？

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

javascript

jquery

events

click

event-handling

如何防止其他点击事件发生运行而其中之一已经是运行在 jQuery 中？