JavaScript中定时器的工作原理(How JavaScript Timers Work)

原文链接:https://johnresig.com/blog/how-javascript-timers-work/

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

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

  • var id=setTimeout(fn,delay); 初始化一个只执行一次的定时器,这个定时器会在指定的时间延迟 delay 之后调用函数 fn ,该 setTimeout 函数返回定时器的唯一 id ,我们可以通过这个 id 来取消定时器的执行。

  • var id=setInvertal(fn,delay);setTimeout 类似,只是它会以 delay 为周期,反复调用函数 fn ,直到我们通过id取消该定时器。

  • clearInterval(id),clearTimeout(id); 这两个函数接受定时器的 id(例如我们上面提到的两个函数产生的定时器 id ),并停止对定时器中指定函数的调用。

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

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

我们可以用下图说明:

Timers.png JavaScript中定时器的工作原理(How JavaScript Timers Work) 经验总结

图中包含大量的信息,吸收并理解这些信息,能帮助我们领悟“异步的 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 回调会立即执行。

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

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 引擎是单线程的,会迫使异步事件进入执行队列,等待执行。

  • setTimeout 和 setInterval 在执行异步代码时从根本上是有所不同的。

  • 如果一个定时器事件被阻塞,使得它不能立即执行,那么它会被延迟,直到下一个可能的时间点,才被执行(这可能比你指定的 delay 时间要长)

  • Interval 的回调有可能‘背靠背’无间隔的执行,这种情况是说 interval 的回调函数的执行时间比你指定的 delay 时间还要长

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


未经允许不得转载:w3h5 » JavaScript中定时器的工作原理(How JavaScript Timers Work)

赞 (0)
分享到: +

评论 沙发

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)