setTimeout()比setInterval()稳定的原因

最新推荐文章于 2025-05-20 16:07:43 发布

Carol小朋友

最新推荐文章于 2025-05-20 16:07:43 发布

阅读量875

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.youkuaiyun.com/lixinyi0622/article/details/86570045

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

探讨setInterval()在JavaScript中可能导致的间隔跳过和连续运行问题，及如何通过链式setTimeout()调用来避免这些问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setInterval()的问题

使用setInterval()的问题在于，定时器代码可能在代码再次被添加到队列之前还没有完成执行，结果导致定时器代码连续运行好几次，而之间没有任何停顿。而javascript引擎对这个问题的解决是：当使用setInterval()时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔

但是，这样会导致两个问题：1、某些间隔被跳过；2、多个定时器的代码执行之间的间隔可能比预期的小

假设，某个onclick事件处理程序使用setInterval()设置了200ms间隔的定时器。如果事件处理程序花了300ms多一点时间完成，同时定时器代码也花了差不多的时间，就会同时出现跳过某间隔的情况
在这里插入图片描述

上图第一个定时器是在205ms处添加到队列中的，但是直到过了300ms处才能执行。当执行这个定时器代码时，在405ms处又给队列添加了另一个副本。在下一个间隔，即605ms处，第一个定时器代码仍在运行，同时在队列中已经有了一个定时器代码的实例。结果是，在这个时间点上的定时器代码不会被添加到队列中

迭代setTimeout

为了避免setInterval()定时器的问题，可以使用链式setTimeout()调用

setTimeout(function fn(){
    setTimeout(fn,interval);
},interval);

这个模式链式调用了setTimeout()，每次函数执行的时候都会创建一个新的定时器。第二个setTimeout()调用当前执行的函数，并为其设置另外一个定时器。这样做的好处是，在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会有任何缺失的间隔。而且，它可以保证在下一次定时器代码执行之前，至少要等待指定的间隔，避免了连续的运行。