javascript - 使用 jQuery 停止包含 SetTimeout 的循环

Question

假设我有以下代码:

  var sequencerRun = function(){    
  var currentTime = 0 
  var starting = 200

  for(var k = 0; k < 16; k++){
    $(".instrument td .beat" + k).each(function(){
      setTimeout(blinker, currentTime,$(this));
    })
    currentTime += starting
    }
  }

  var timerId;

  var runSeq = function(){
    setInterval(sequencerRun,3200);
  }

  $('.play').click(function(){
    sequencerRun();
    runSeq();
  })

  $('.stop').click(function(){
    //??????
  })

我使用此代码来运行我正在构建的鼓机中的音序器。 sequencerRun运行一个矩阵，使用 table 构建，并检查每一列是否会播放相应的声音。我正在做的是分别使用setTimeout(blinker, currentTime,$(this));在不同时间(0,200,400，...，1600)安排每列(1 - 16)的检查。问题是这些事件是在 sequencerRun 上的每次调用时立即安排的。 。所以如果 sequencerRun被调用，我在时间 850 处单击，我希望时间为 1000、1200、1400、1600 的所有 setTimeouts 不调用 blinker 。有办法做到这一点吗？

Answer 1

将间隔存储在变量中并使用clearInterval()

 var interval;
 var runSeq = function(){
    interval = setInterval(sequencerRun,3200);
  }

  $('.play').click(function(){
    sequencerRun();
    runSeq();
  })

  $('.stop').click(function(){
    clearInterval(interval);
  });

此外，对于 setTimeout 本身

setTimeout(blinker, currentTime,$(this));

使用标志

var stopped = false;
$('.stop').click(function(){
        clearInterval(interval);
        stopped = true;
      });

以及回调

function blinker(){
   if(stopped){
       return;
   }
   //...else, continue normal execution
}