javascript - 网页中设置过多的 setInterval 会不会对效率和内存有影响

Question

我的网页是一个移动端网页，加了很多的setInterval，这样会对手机内存，和网页效率产生出影响

Answer 1

var time = setInterval(function() { // ...}, 1000);
clearInterval(time);

要注意clear

Answer 2

会占用比较多的内存，容易造成内存泄露：JavaScript 高级计时器 详细分析

Answer 3

其实反而比较占用cpu，你自己在1个页面里写10个setInterval，然后开“任务管理器”看看就知道了

Answer 4

太多了肯定会，想想别的办法吧。

Answer 5

建议使用setTimeout代替setInterval，性能会好很多，实际效果也会更理想，可以google一下为什么(手机打字不方便)

===========分隔线============

让那么多人都踩了，内心不好受啊啊啊啊，那我详细补充一下，望能顶回来

看代码:

javascript// 假设我要做个倒计时，以秒为单位
setInterval(function () {
  // DOM操作
}, 1000)

对于上面的代码，会有什么问题，我想很多人应该会不了解。

基础知识补充：

• 在javascript里会有个事件队列，按照先进先出(FIFO)的方式执行队列里的事件回调，又因为javascript是单线程的，所以在一个时间点上只能执行队列里的第一个事件回调，接下来的按推入时间顺序依次执行。
• setTimeout和setInterval注册的事件回调，依然是推入事件队列等待被执行。
• setTimeout和setInterval里的事件回调是什么时候推入事件队列呢？对于示例代码，它是在代码执行后的1000ms后才推入事件队列，然后等待执行。而不是先推入事件队列，然后等待1000ms后执行！

总结：

对于在计算量比较大，或事件触发比较频繁的业务里，事件队列的事件回调很可能会受到显著的延迟(延迟是必然的)。这时由于setInterval是不间断准时地往事件队列里推入事件回调，所以这里会导致一个很可能的问题，在事件队列里很可能有一大堆相邻的同个setInterval推入的事件回调，这最终导致事件回调之间的执行间隔不是1000ms，而是更小甚至10ms（这要看事件回调的代码计算量）

在我的示例代码中，会出现的境况是，倒计时，一时很准确，一时跳跃很快变得很奇怪！

改进代码:

javascriptvar timeoutId;

var countdown = function () {  
  // 时间到
  if () { clearTimeout(timeoutId); }

  // DOM操作
  ...

  timeoutId = setTimeout(countdown, 1000);
};

timeoutId = setTimeout(countdown, 1000);

改进后，每秒之间的间隔将不会小于1000ms