使用jQuery停止包含SetTimeout的循环

时间:2015-06-20 18:50:27

标签: javascript jquery

假设我有以下代码:

  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。反正有吗?

1 个答案:

答案 0 :(得分:3)

将时间间隔存储在variable并使用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
}