JavaScript的计时器的工作原理

geekzhou 发布于2019-08-21 10:28 / 1437人阅读

摘要：创建了一个简单的计时器，在经过给定的时间后，回调函数将会被执行。接受一个计时器由之前两种计时器返回并且停止计时器回调函数的执行。然而，我们可以注意到，当定时器再一次触发在计时器回调函数正在执行的时候，这一次定时器回调函数被丢弃了。

最近都在看一些JavaScript原理层面的文章，恰巧看到了jQuery的作者的一篇关于JavaScript计时器原理的解析，于是诚惶诚恐地决定把原文翻译成中文，一来是为了和大家分享，二来是为了加深自己对于JavaScript的理解。原文链接：http://ejohn.org/blog/how-javascript-timers-work/

原文翻译：

从基础层面来讲，理解JavaScript计时器的工作原理是很重要的。由于JavaScript是单线程的，所以很多时候计时器并不是表现得和我们的直观想象一样。让我们从下面的三个函数开始，它们能够让我们有机会去构造和操作计时器。

var id =setTimeout(fn, delay); 创建了一个简单的计时器，在经过给定的时间后，回调函数将会被执行。这个函数会返回一个唯一的ID，便于在之后某个时间可以注销这个计时器。

var id = setInterval(fn, delay)； -和setTimeout类似，但是每经过一段时间（给定的延时），所传递的函数就会被执行一次，直到这个定时器被注销。

clearInterval(id); clearTimeout(id); -接受一个计时器ID（由之前两种计时器返回）并且停止计时器回调函数的执行。

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

这一张图片里面有很多信息需要慢慢消化，但是彻底地理解这张图片将会让你对JavaScript异步执行是如何工作的有一个更好的认识。这张图片是从一维的角度来阐述的:在垂直方向是以毫秒计的时间,蓝色的块代表了

当前正在执行的JavaScript代码段。比如第一段JavaScript执行了大概18毫秒，鼠标点击事件大概执行了11毫秒。

由于JavaScript每次只能执行一段代码（基于它单线程的特性），所以所有这些代码段都阻塞了其他异步事件的执行。这就意味着，当一件异步事件（比如鼠标点击，计时器触发和一个XMLHttpRequest 请求完成）触发的时候，这些事件的回调函数将排在执行队列的最后去等待执行（排队的方式因浏览器不同而不同，这里只是一个简化）。

一开始，在第一段代码段内，两个计时器被初始化：一个10ms的setTimeout 和一个10ms的setInterval。由于计时器在哪儿初始化就在那儿开始计时，所以实际上计时器在第一段代码执行完成之前就触发了。然而，计时器的回调函数并不是立即执行了（单线程限制了不能这样做），相反的是，回调函数排在了执行队列的最后，等到下一个有空的时间去执行。

此外，在第一个代码块内我们看到了一个鼠标点击事件发生了。与之相关的javascript异步事件（我们不可能预测用户会在什么时候去采取这样的动作，因此这个事件被视为异步的）并不会立即执行。和计时器一样的是，它被放到了队列的最后去等待执行。

在第一个代码快执行完成的时候，浏览器会立即发出这样的询问：谁正在等待执行？这个时候，鼠标点击处理程序和计时器回调函数都在等待执行。浏览器选择了其中一个（鼠标点击回调函数）并且立即执行它。为了执行，计时器会等到下一个可能执行的时间。

我们注意到，当鼠标点击事件对应的处理程序正在执行的时候，第一个定时回调函数也要执行了。同定时计时器一样，它也在队列的后面等待执行。然而，我们可以注意到，当定时器再一次触发（在计时器回调函数正在执行的时候），这一次定时器回调函数被丢弃了。如果在执行一大块代码块的时候，你把所有的定时回调函数都放在队列的最后，结果就是一大串定时回调函数将会没有间隔的一起执行，直到完成。相反，在把更多定时回调函数放到队列之前，浏览器会静静的等待，知道队列中的所有定时回调函数都执行完成。

事实上，我们可以看到，当interval回调函数正在执行的时候,interval第三次被触发。这给我们一个很重要的信息：interval并不关心当前谁在执行，它的回调函数会不加区分地进入队列，即使存在这个回调函数会被丢弃的可能。

最后，当第二个定时回调函数完成执行的时候，我们可以看到javascript引擎已经没有什么需要执行了。这意味着，浏览器现在正在等待一个新的异步事件的发生。我们可以看到在50ms的时候，定时回调函数再一次被触发。然而，这一次，没有其他代码阻塞他的执行了，所以他立即执行了定时回调函数。

让我们看一个例子来更好地阐述setTimeout 和setInterval的区别。

1 setTimeout(function(){
2     /* Some long block of code... */
3     setTimeout(arguments.callee, 10);
4 }, 10);
5  
6 setInterval(function(){
7     /* Some long block of code... */
8 }, 10);

第一眼看上去这两段代码在功能上是等价的，但事实上却不是。值得注意的是，setTimeout 这段代码会在每次回调函数执行之后至少需要延时10ms再去执行一次（可能是更多，但是不会少）。但是setInterval会每隔10ms就去尝试执行一次回调函数，不管上一个回调函数是不是还在执行。

从这里我们能够学到很多，让我们来概括一下：

javascript引擎只有一个线程，迫使异步事件只能加入队列去等待执行。

在执行异步代码的时候，setTimeout 和setInterval 是有着本质区别的。

如果计时器被正在执行的代码阻塞了，它将会进入队列的尾部去等待执行直到下一次可能执行的时间出现（可能超过设定的延时时间）。

如果interval回调函数执行需要花很长时间的话(比指定的延时长)，interval有可能没有延迟背靠背地执行。

上述这一切对于理解js引擎是如果工作的无疑是很重要的知识，尤其是大量的典型的异步事件发生时，对于构建一个高效的应用代码片段来说是一个非常有利的基础。

个人见解：

翻译完成之后，感觉对于javascript异步有了新的认识，但是可能初学者看不太懂这篇文章，于是写了一个demo，运行在nodejs环境下（浏览器不容易模拟）

 1 var startTime = new Date();
 2 
 3 //初始化计时器
 4 var start = setTimeout(function() {
 5     var end = new Date();
 6     console.log("10ms的计时器执行完成，距离程序开始" + (end - start) + "ms");
 7 }, 10);
 8 
 9 //模拟鼠标点击事件
10 function asyncReal(data, callback) {
11     process.nextTick(function() {
12         callback();      
13      });
14 }
15 var asyncStart = new Date();
16 asyncReal("yuanzm", function() {
17     var asyncEnd = new Date();
18     console.log("模拟鼠标执行事件完成，花费时间" + (asyncEnd - asyncStart) + "ms");
19 })
20 
21 //设定定时器
22 count = 1;
23 var interval = setInterval(function() {
24     ++count;
25     if(count === 5) {
26         clearInterval(interval);
27     }
28     console.log("定时器事件");
29 },10);
30 
31 //模拟第一阶段代码执行
32 var first = [];
33 var start = new Date();
34 for(var i = 0;i < 10000000;i++){
35     first.push(i);
36 }
37 var end = new Date();
38 console.log("第一阶段代码执行完成,用时" + (end - start) + "ms");

运行结果如下：

我们按照文中的原理来解释一下：

一开始设定的计时器并不是在10ms后立即执行，而是被添加到了队列后面，等到第一阶段代码执行完成才执行，距离开始的时间也不是设定的10ms

鼠标点击事件同样因为是异步事件，添加到了队列后面，等到第一阶段代码执行完成的时候才执行。

鼠标点击事件先于计时器事件添加到队列后面

最后定时器才能执行

郑重声明
本文章属于个人原创，如需转载，请加上原文链接：
http://segmentfault.com/a/1190000002633108
另外同样可以在博客园上面查看本文章：http://www.cnblogs.com/yuanzm/p/4126762.html
也欢迎Follow我的Github：https://github.com/yuanzm

GPU云服务器云服务器 cdn的工作原理 webrtc的工作原理 hashmap的工作原理 session的工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85584.html

javascript 定时器工作原理

摘要：说到中的定时器，我们肯定会想到和这两个函数。第一个回调一执行，又开启了第二个，这个定时器也是期望延时之后能够执行它的回调函数。可以用下面的图来概括总结上面对定时器执行原理进行了简要的分析，希望能够帮助我们更深入的理解。说到 javascript 中的定时器，我们肯定会想到 setTimeout() 和 setInterval() 这两个函数。本文将从事件循环（Event Loop）...

godlong_X 2019-08-21 10:40 评论0 收藏0
Javascript定时器那些事儿

摘要：一什么是定时器提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下设置一个定时器，在定时器到期后执行一次函数或代码段定时器延迟后执行的函数延迟后执行的代码字符串，不推荐使用原理类似延迟的时间单位毫秒，默认值为向延迟函数传递而外的一、什么是定时器 JS提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下 setTimeout: 设置一个定时器，在定时器到期后执行...

Riddler 2019-08-21 15:26 评论0 收藏0
谈谈我对js中定时器的一点理解

摘要：这两个函数接受定时器的例如我们上面提到的两个函数产生的定时器，并停止对定时器中指定函数的调用。注意，定时器虽然触发了，但是并不会立即执行，它只是把需要延迟执行的函数加入了执行队列，在线程的某一个可用的时间点，这个函数就能够得到执行。撸了今年阿里、头条和美团的面试，我有一个重要发现....... javascript定时器工作原理是一个重要的基础知识点。因为定时器在单线程中工作，它们表...

frontoldman 2019-08-26 10:37 评论0 收藏0
【翻译】javascript 动画原理浅析

摘要：动画原文通常，框架会为你处理动画。整个的动画过程被分成了很小的步骤，每一个步骤被定时器调用。因为定时器的周期非常短，所以动画看起来是连续的。已经过去的动画时间作为分子，计算每一帧通过公式。线性的使动画以固定的速度进行。动画原文：http://javascript.info/tutori... 通常，框架会为你处理动画。但是，你可能想知道仅仅用javascript怎么来实现动画，和可...

Worktile 2019-08-20 14:46 评论0 收藏0
浏览器的工作原理整理

摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。浏览器的结构浏览器的主要组件包括：用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...

jzman 2019-08-02 12:00 评论0 收藏0