JS定时器不可靠的原因及解决方案

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

前言

在工作中应用定时器的场景非常多，但你会发现有时候定时器好像并没有按照我们的预期去执行，比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行。想要知道为什么会这样，我们首先需要了解Javascript计时器的工作原理。

定时器工作原理

为了理解计时器的内部工作原理，我们首先需要了解一个非常重要的概念：计时器设定的延时是没有保证的。因为所有在浏览器中执行的JavaScript单线程异步事件（比如鼠标点击事件和计时器）都只有在它有空的时候才执行。

这么说可能不是很清晰，我们来看下面这张图

图中有很多信息需要消化，但是完全理解它会让您更好地了解异步JavaScript执行是如何工作的。这张图是一维的:垂直方向是(挂钟)时间，单位是毫秒。蓝色框表示正在执行的JavaScript部分。例如，第一个JavaScript块执行大约18ms，鼠标点击块执行大约11ms，以此类推。

​ 由于JavaScript一次只能执行一段代码(由于它的单线程特性)，所以每一段代码都会“阻塞”其他异步事件的进程。这意味着，当异步事件发生时(如鼠标单击、计时器触发或XMLHttpRequest完成)，它将排队等待稍后执行。

​ 首先，在JavaScript的第一个块中，启动了两个计时器:一个10ms的setTimeout和一个10ms的setInterval。由于计时器是在哪里和什么时候启动的，它实际上在我们实际完成第一个代码块之前触发，但是请注意，它不会立即执行(由于线程的原因，它无法这样做)。相反，被延迟的函数被排队，以便在下一个可用的时刻执行。

​ 此外，在第一个JavaScript块中，我们看到鼠标单击发生。与此异步事件相关联的JavaScript回调(我们永远不知道用户何时会执行某个动作，因此它被认为是异步的)无法立即执行，因此，就像初始计时器一样，它被排队等待稍后执行。

​ 在JavaScript的初始块完成执行后，浏览器会立即问一个问题:等待执行的是什么?在本例中，鼠标单击处理程序和计时器回调都在等待。然后浏览器选择一个(鼠标点击回调)并立即执行它。计时器将等待到下一个可能的时间，以便执行。

setInterval调用被废弃

在click事件执行时，第20毫秒处，第二个setInterval也到期了，因为此时已经click事件占用了线程，