JavaScript中定时器的工作原理(How JavaScript Timer

科技 网编 2022-06-22 17:22 356 0

原文链接:

JavaScript 定时器工作原理是一个重要的基础知识点。因为定时器在单线程中工作,它们表现出的行为很直观。

我们该如何创建和维护定时器呢?要从如下三个函数(都是定义在全局作用域,在浏览器中就是 Window 的方法)说起:

要深入理解定时器工作原理,我们需要探索一个重要的概念:定时器指定的延迟时间并不能得到保证。

在浏览器中定时器原理,因为所有的 JavaScript 代码都运行在单一线程之中,异步事件(如鼠标点击,定时器)只有在他们被触发的时候他们的回调才有机会得以执行。

我们可以用下图说明:

图中包含大量的信息,吸收并理解这些信息,能帮助我们领悟“异步的 JavaScript 代码是如何工作的”。

这个图是一维的,垂直方向是时间,以毫秒为单位。蓝色的盒子代表正在执行的javascript代码所占时间片段。

例如,第一个 JavaScript 块执行时间约 18ms,第二个鼠标点击块执行了约 11ms,其他块类似。

因为单线程的缘故,在同一时间只能执行一条 JavaScript 代码,每一个代码块(蓝色盒子)都会阻塞其他异步事件的执行。

这就意味着,当一个异步事件发生的时候(例如鼠标点击,定时器触发,一个 XMLHttpRequest 请求完成),它进入了代码的执行队列,执行线程空闲时会依照该执行队列中顺序依次执行代码。(如何将异步事件加入队列,不同浏览器,他们的实现可能有所差异,所以这里我们将其简单化)。

开始的时候,在 JavaScript代码块(第一个盒子),初始化了两个定时器,一个 10ms 延迟的 setTimeout 和 10ms 的 setInterval 。这些定时器可能会在我们第一个代码块执行结束之前就触发,这取决于定时器在第一个代码块中启动的位置和时间。

注意,定时器虽然触发了,但是并不会立即执行,它只是把需要延迟执行的函数加入了执行队列,在线程的某一个可用的时间点,这个函数就能够得到执行。

当第一个 JavaScript 代码初始化块执行结束,浏览器立即提出一个问题:谁在等待着被执行?

在这个案例中鼠标点击时间的处理程序和一个定时器( setTimeout )都在等待。浏览器选择一个并执行(这里是鼠标点击事件的处理程序)。定时器就需要等待下一个可用时间来执行。

需要注意的是当鼠标点击事件处理程序执行的时候,第一个 interval 定时器触发了。和 timeout 定时器一样,他的回调函数被加入了执行队列,等待执行。

然而,还需要注意到当 interval 定时器再次触发定时器原理,这个时候 timeout 定时器的回调函数正在执行,此时这个 interval 的触发被放弃了。

假想(浏览器不这样做),在一个占用时间很多的初始化定时器的代码块中,所有的interval触发都把回调加入执行队列,当初始化代码块结束后,执行队列中已经累加了大量的定时器回调函数,结果就会出现大量的interval回调函数无间隔的执行,直到该执行队列清空。所以浏览器在讲一个interval回调加入执行队列前,会检查执行队列,如果其中存在尚未执行的interval回调那么就等待,直到当前执行队列中没有相应interval的回调以后才会继续入队interval回调。

事实上,如图,我们看见在第一个interval的回调执行的时候(之前进入执行队列),第三个interval触发了,这想我们展示一个重要的现象:interval不关心当前正在执行的代码,他们会不加选择的添加回调到执行队列,尽管这意味着两个interval回调函数执行的时间间隔被牺牲。这里第一个interval回调执行结束后,紧跟着第三个interval的回调马上得到执行,中间没有印象中应该有的 10ms 间隔。

最终,在第三个interval的回调执行结束后,我们看见执行队列中没有等待 JavaScript 引擎执行的代码,这就意味着,浏览器现在等待新的异步事件的发生,在 50ms 的刻度处interval再次触发,此时没有什么会阻塞 JavaScript 引擎,这个interval回调会立即执行。

让我们看一个例子来阐明,setInterval 和 setTimeout 的不同:

setTimeout(function () {
  /* Some long block of code... */
  setTimeout(arguments.callee, 10);
}, 10);
setInterval(function () {
  /* Some long block of code... */
}, 10);

复制

看第一眼,会觉得这两段代码功能相同,实际上,他们是不同的。

需要注意到,setTimeout的回调函数的执行总是保证了至少 10ms 的间隔(与上一个回调的执行相比,实际执行时,这个间隔可能变长,但是不可能更少),但是 setInterval会尝试每隔 10ms 执行一次回调,不管上一个回调函数时候已经执行完毕。(很多类库的动画都是使用的setTimeout实现)

这里我们学到很多,总结一下:

这些都是构建 JavaScript 应用程序非常重要的知识。了解 JavaScript Engine 是如何工作的,特别存在大量的异步事件发生,为构建高级应用程序代码打下基础。

本文已加入 腾讯云自媒体分享计划 (点击加入)

评论区