暂时停止功能的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的答案应该很好地工作。