javascript - 如何在控制台中跟踪正在执行的间隔数 - JavaScript

Question

我在尝试了解 setInterval() 是正在发生还是已被终止时遇到了问题。我正在创建一个间隔并将其保存到一个变量中:

interval = setInterval('rotate()',3000);

然后在点击一个元素时我停止间隔并等待 10 秒再开始一个新的间隔，顺便说一下可变间隔是全局的:

$(elm).click(function(){

  clearInterval(interval);
  position = index;

  $('#banner div').animate({
    'margin-left':position*(-img_width)
  });

  setTimeout('startItnerval()',10000);


});

function startItnerval(){

    interval = setInterval('rotate()',3000);

}

它似乎有效，但最终我意识到仍然存在间隔，每次我开始一个新间隔时，它都会保存在间隔变量中，这是全局的，所以理论上即使我开始 100 个间隔，它们也是全部保存在同一个变量中，替换了之前的间隔，对吗？所以我应该只有一个间隔实例；然后在 clearInterval(interval); 上它应该停止任何实例。

看结果，显然即使保存在同一个变量中，它们都是独立的实例，需要单独杀死。

如何跟踪正在执行的时间间隔，并在可能的情况下一一识别它们？即使我能够解决问题我真的很想知道是否有一种方法可以在控制台中计算或显示正在执行多少间隔？

谢谢

Answer 1

jsFiddle Demo

正如评论中所指出的，随着计时器被添加到页面中，id 不断增加。因此，可以像这样清除页面上运行的所有计时器:

function clearTimers(){
 var t = window.setTimeout(function(){
  var idMax = t;
  for( var i = 0; i < idMax; i++ ){
   window.clearInterval(i);
   window.clearTimeout(i);
  }
 },4);
}

---

之所以只能看到一个区间，是因为每次开始一个新区间时，都会覆盖 interval 中的值。这会导致先前的间隔丢失但仍处于事件状态。

一个建议是只控制对变量的访问。很明显存在启动函数调用过于频繁的问题

clearInterval(interval);//when you clear it, null it
interval = null;

然后再利用它

if( interval != null ){
 interval = setInterval('rotate()',3000);
}

此外，正如 Pointy 在评论中指出的那样，使用字符串调用函数并不是最佳做法。它基本上所做的是将其转换为一个 Function 表达式，类似于使用 eval。您可能应该使用函数名称作为回调

setInterval(rotate,3000);

或者让匿名函数发出回调

setInterval(function(){ rotate(); },3000);