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的两次回调函数的执行将连续。

05-11 20:44