當其中一個已經在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事件監聽器被解雇了？