Javascript 暂时停止函数jquery

您可以看到，我使用了start.off（'click'）方法，在调用事件侦听器后停止它再次运行。但问题是，我只希望在事件运行期间关闭事件侦听器。因此，当事件仍在运行时，无法再次调用它。但一旦活动结束，我希望它再次“可调用”。有人知道我是怎么做的吗

其他方法（也不起作用）。有人能帮我吗。另一个现在已经清楚了

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');
    })

});

---

您还可以在活动元素上切换类，然后可以检查该类，如果该类存在，则不执行任何操作

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
                });

      });}

    });

---

您还可以在活动元素上切换类，然后可以检查该类，如果该类存在，则不执行任何操作

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
                });

      });}

    });

---

对于一个对象，您可以使用全局变量，在我的例子中，我将使用

isRunning

：

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')
            });

  });

});

这样，您的应用程序在

isRunning==false

之前不应该运行代码，这应该发生在

fadeIn

完成之后

语法：

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');
        });
    }
});

---

对于两个或多个对象，Charlietfl的答案应该非常有效。

对于一个对象，您可以使用全局变量，在我的情况下，我将使用

isRunning

：

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')
            });

  });

});

这样，您的应用程序在

isRunning==false

之前不应该运行代码，这应该发生在

fadeIn

完成之后

语法：

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');
        });
    }
});

---

对于两个或多个对象，Charlietfl的答案应该很好。

直到fadeIn完成，否则fadeIn完成第一个完成动画的人将设置

isRunning

false…但其他人仍将运行第一个完成动画的人将设置

isRunning

false…但其他人仍将运行感谢您的回答。我也在考虑另一种方法，使用一个名为q的变量，但它不起作用。你能解释一下为什么吗？我将把这个例子编辑到我的初始问题中。因为有不止一个元素，当其他元素仍处于活动状态时，第一个元素会改变它。谢谢你的回答。我也在考虑另一种方法，使用一个名为q的变量，但它不起作用。你能解释一下为什么吗？我将把这个例子编辑到我的初始问题中。因为有不止一个元素，当其他元素仍处于活动状态时，第一个元素会改变它