John:How JavaScript Timers Work

John大神的bolg链接：http://ejohn.org/blog/how-javascript-timers-work/

JavaScript中的定时器经常表现的跟我们想象的不同，我们用三个函数来讲解这个问题。

var id = setTimeout(fn, delay); //初始化一个定时器，delay ms 之后调用函数fn。
var id = setInterval(fn, delay); //跟第一个定时器类似，只不过是每隔delay ms 都调用函数fn。
clearInterval(id);
clearTimeout(id); //接受一个定时器id作为参数，并撤销该定时器。

博客正文待翻译...

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

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

这两段代码第一眼看上去功能相同，其实不然。

setTimeout里的代码在上一次执行完之后总是会有至少10ms的delay，如果如果线程没有堵塞的话（代码立即执行）那么正好等待10ms。两次代码之间的时间间隔将是{代码执行时间+(>=10ms)}。

setInterval里的代码则会不管上次的代码执行情况，每间隔10ms尝试执行，如果执行时间大于10ms，那么两次执行则会连续。

总结：

1. JavaScript引擎为单线程，所有异步事件需要先入队再执行。

2. setTimeout和setInterval原理不同。

3. 如果一个timer（特指setTimeout定时器）回调函数的执行被阻塞，那么它会等到线程空闲再执行，所以总的delay时间可能比设定的时间要大。

4. Intervals的执行时间如果比设定时间长的话，则Intervals的两次回调函数的执行将连续。