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（'click'）方法，以便在调用后再次阻止事件侦听器运行。但问题是，我只希望事件监听器在事件运行期间关闭。因此在事件仍在运行时无法再次调用它。但是一旦事件结束，我希望它再次“可以调用”。有谁知道怎么做？

这样做的其他方式（两者都不起作用）。有人能帮我一下吗。另一个现在很清楚。

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，这应该在fadeIn完成后发生。

<强>语法：

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

对于两个或两个以上的物品，Charlietfl的答案应该完美无缺。

暂时停止函数jquery

2 个答案: