近来都在看一些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
