JavaScript setInterval 定时器越走越快原因及解决方案

解决JavaScript定时器越走越快的问题

在之前的项目实践中，曾使用定时器实现循环播放功能，但遇到了定时器运行速度逐渐加快的现象。起初怀疑是前后HTML代码拼接存在问题，在时间紧迫的情况下反复修改代码却未见效。最终排查发现，问题根源在于JavaScript定时器的使用方式不当，特此记录并分享解决方案。

（setinterval）多次初始化

使用JavaScript定时器（setInterval）时，首要原则是记得清除，即调用clearInterval方法。由于缺乏定时器使用经验，初期未进行清除操作。程序每次初始化时都会调用一次定时器，而之前的定时器实例未被销毁，新的定时器随即开始执行。这导致间隔时间从1秒变为0.5秒，再变为0.25秒，从视觉上看，表现为定时器“越走越快”。

这个过程可以用几行简单的代码模拟一下

<label id="lblShowNum"></label>
<input type="button" id="btnStart" value="启动" />
<input type="button" id="btnClear" value="清除" />
window.onload = function () {
  var i = 0;
  var timer;
  document.getElementById("btnStart").onclick = function () {    
    timer = setInterval(
      function () {
        i++;
        document.getElementById("lblShowNum").innerText = i;
      }, 1000);
  }
  document.getElementById("btnClear").onclick = function () {
    clearInterval(timer);
  }
}

如果只点击一次“启动”按钮，定时器会正常运行；点击“清除”按钮即可暂停定时器。然而，每次点击“启动”按钮，数字递增速度都会提高，且清除功能不再起作用。这是因为每次点击“启动”时，都会创建一个新的定时器实例。

清除（clearInterval）的失效

但为什么清除方法会失效呢？在代码中，我们定义了一个变量timer来接收定时器返回值，对timer操作是否就能清除定时器了呢？答案是否定的。首先需要查看setInterval()返回值的说明。

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

从上述说明可以看出，该返回值并非定时器本身，而是一个用于传递给clearInterval以取消周期性执行的标识值。如果想当然地将其视为定时器对象，认为每次初始化赋值即为新定时器，这是错误的。最初我也持有这种误解。

每一次给timer赋值都是在创建新的定时器对象，而且之前的定时器也并没有被清除，所以这时候调用clearInterval(timer)清除的只是最后一个被创建的定时器对象罢了。

使用上面的例子就可以简单的用肉眼观察效果，先点击一次启动观察速度，再点击第二次，会看到速度有明显的提升，这时候使用清除功能，速度就会回到第一次启动的状态，但是多次点击清除是没有用的，如果想看准确的结果可以将时间打印出来进行比较。

解决方法

看到这里，答案呼之欲出了，很简单，在每次初始化定时器之前先执行清除操作，保证之前的定时器被清除了就不会发生越走越快的情况，所以其实并不是定时器越走越快，而是有多个定时器在执行，定时器里面的程序执行的频率提高了。

window.onload = function () {
  var i = 0;
  var timer;
  document.getElementById("btnStart").onclick = function () {    
    clearInterval(timer); 
    timer = setInterval(
      function () {
        i++;
        document.getElementById("lblShowNum").innerText = i;
      }, 1000);
  }
  document.getElementById("btnClear").onclick = function () {
    clearInterval(timer);
  }
}

总结

以上所述是小编给大家介绍的轻松解决JavaScript定时器越走越快的问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！