暫時停止功能的jQuery

Question

var start = $('#start_img'); 

start.on('click', function(){ 
    var piano = $('.piano'); 
    piano.each(function(index){ 
     $(this).hide().delay(700 * index).fadeIn(700*index); 
     start.off('click'); 
    }) 

}); 

你可以看到，我已經使用了start.off（「點擊」）方法，從一旦它被稱爲再次停止運行的事件監聽器。但事情是，我只想讓事件偵聽器在事件運行期間關閉。以便在事件仍在運行時不能再次調用它。但一旦事件結束，我希望它再次成爲'可調用'的。有誰知道如何做到這一點？

這樣做的其他方式（也不工作）。有人能幫我一下嗎。另一個現在很清楚。

var start = $('#start_img'); 



    start.on('click', function() { 
     var q = 0; 
     var piano = $('.piano'); 
     if (q === 1) { 
     return; // don't do animations 
     } 
     else{ 
     piano.each(function(index) { 
     q = 1; 
     $(this).hide() 
       .delay(700 * index) 
       .fadeIn(700 * index, function() { 
        // remove from each instance when animation completes 
        q = 0 
       }); 

     });} 

    }); 

Answer 1

你可以切換上的有源元件類以及，然後你可以檢查這個類，而不是是否存在

start.on('click', function() { 
    var piano = $('.piano'); 
    if (piano.hasClass('active')) { 
    return; // don't do animations 
    } 
    piano.each(function(index) { 
    $(this).addClass('active') 
      .hide() 
      .delay(700 * index) 
      .fadeIn(700 * index, function() { 
       // remove from each instance when animation completes 
       $(this).removeClass('active') 
      }); 

    }); 

}); 

Answer 2

對於只有一個對象做任何事情，你可以使用全局變量對於這一點，在我的情況，我將使用isRunning：

var start = $('#start_img'); 
var isRunning = false; 

start.on('click', function(){ 
    if (!isRunning){ 
     isRunning = true; 
     var piano = $('.piano'); 
     piano.each(function(index){ 
      $(this).hide().delay(700 * index).fadeIn(700*index, function(){ 
       isRunning = false; 
      }); 
      start.off('click'); 
     }); 
    } 
}); 

這樣，你的應用程序不應該運行的代碼，直到isRunning == false，後應該發生10完成。

語法：

.fadeIn([duration] [,complete]); 
.fadeIn(options); 
.fadeIn([duration] [,easing] [,complete]); 

對於兩個或多個對象，Charlietfl的答案應該很好地工作。