再次激活之前點擊需要完成

Question

我正在處理一個簡單的幻燈片放映模式，使用下一個和上一個按鈕進行導航。

我設置這是具有其與7個滑動的容器都具有相同的尺寸與容器中，用與左側的方式被定位爲100％，200％，等等

的按鈕動畫顯示marginLeft轉到下一張或上一張幻燈片。

$('#slideArrowRight').click(function(){ 
     var allSlides = $(this).siblings('.slideContainer'); 
     var slideWidth = allSlides.width(); 
     var maxSlides = $('.slideContainer').length - 1; 
     var maxWidth = maxSlides * slideWidth; 
     var negative = 0 - maxWidth; 

     if (parseFloat($(allSlides).css('marginLeft')) <= negative) {} 
     else {  $(allSlides).animate({marginLeft: "-=" + (slideWidth) + "px"}, {duration:200});  } 

    }); 

我使用if語句來檢查是否達到marginLeft的最高金額，因此它不能走得更遠。

這就是我想出的。並覺得什麼東西實際工作xD （很新的JavaScript和jQuery所以是的我退出，如果東西開始工作）

但是，如果我點擊按鈕真的很快，它獲得了最後一張幻燈片作爲函數堆棧隊列。並且點擊時未達到最大marginLeft。

所以我的問題是我如何得到它，以便該功能不能運行，除非功能完成？

我嘗試了.finish（）但立即取消了動畫，而不是我正在尋找的東西。我主要是想讓它不能執行，除非函數不在隊列中。

Answer 1

您應該使用簡單的標誌animationUnderExecution，該標誌在功能的開頭設置爲true，最後設置爲false。

首先事件函數之前定義的標誌：

var animationUnderExecution = false; 

現在你的函數內（開頭）檢查，如果您正在執行另一個動畫，並設置標誌設置爲true：

if (animationUnderExecution) return; 
animationUnderExecution = true; 

現在當動畫完成時，必須將標誌設置爲false：

$(allSlides) 
    .animate({marginLeft: "-=" + (slideWidth) + "px"}, 
     {duration:200}, 
     complete: function() { 
      animationUnderExecution = false; 
    }); 

總結它應該看起來如下：

var animationUnderExecution = false; 
$('#slideArrowRight').click(function(){ 

     if (animationUnderExecution) return; 
     animationUnderExecution = true; 

     var allSlides = $(this).siblings('.slideContainer'); 
     var slideWidth = allSlides.width(); 
     var maxSlides = $('.slideContainer').length - 1; 
     var maxWidth = maxSlides * slideWidth; 
     var negative = 0 - maxWidth; 

     if (parseFloat($(allSlides).css('marginLeft')) <= negative) {} 
     else {  
      $(allSlides) 
       .animate({marginLeft: "-=" + (slideWidth) + "px"}, 
        {duration:200}, 
        complete: function() { 
         animationUnderExecution = false; 
       }); 
     } 

    });