对setTimeout异步的理解

作者：肥肚

有时候，加载一些广告的时候，我们用setTimeout实现异步，好让广告不会阻塞我们页面的渲染。 

为什么setTimeout能够实现异步呢？

 

看一段糟糕的代码：

setTimeout(function() {

        while (true) {

        }

}, 100);

setTimeout(function() {

        alert('你好!');

}, 200);

 

setTimeout是异步，那么，不管前面的代码怎么样，他条件满足了就会执行，但上面的代码，由于任务队列里有一个死循环，而后面的弹出代码在队列的后面，循环不息，所以后面的永远不会被执行到。

 

理解setTimeout,我个人认为就是理解浏览器的执行模型。

 

浏览器是基于一个事件循环的模型，在这里面，可以有多个任务队列，比如render是一个队列，响应用户输入是一个，script执行是一个。任务队列里放的是任务，同一个任务来源的任务肯定在同一个任务队列里。

任务有优先级，鼠标或键盘响应事件优先级高，大概是其他任务的3倍。

 

任务的执行过程中可能产生：

spin：不影响Event Loop并延后执行

pause：停止Event Loop并延后执行

 

spin，如setTimeout的异步方式，就是spin方式，当执行到setTimeout时，此任务先暂停并保存，继续执行后续任务，当条件满足时，再将setTimeout的执行任务放回任务队列的后面，等待执行，假如前面有一个2s的任务，那原本是delay 1s的任务实际执行时会是在第3s的时候才执行。

 

pause，则是当在js中获取元素的offsetWidth等需要更新dom操作的动作时发生的。当执行到此任务时，将停止事件循环的工作，也就是先停止js引擎解析执行，跳到渲染引擎更新用户界面至当前状态，这期间，不处理后续任务，当前执行的脚本暂停，界面保持响应，但无法处理输入（事件循环停了），直到成功返回才继续执行任务。

 

setTimeout的技巧使用：

 

1 <input type="text" value="a" name="input" onkeydown="alert(this.value)" />2 <input type="text" value="a" name="input"3 onkeydown="var me=this;setTimeout(function(){alert(me.value)},0)" />

 

第一个在keydown的时候，弹出来的是input里原来的value，而第2个在keydown的时候，却能弹出更新后的value，就是因为setTimeout，虽然他的delay设置为0，几乎是即时触发，但还是被添加到了执行队列后面，但就是这个过程，渲染已经完成了，当他回调函数执行时，输出来的已经是更新后的value了。

 

setTimeout知识点的面试题：

 

下面的代码，多久之后会弹出'end'？ 为什么？

 

1 var t = true;2  3 setTimeout(function(){ t = false; }, 1000);4  5 while(t){ }6  7 alert('end');

 

答案明显，都在上面有解释到了。

 

参考文章：

http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550264.html

http://www.laruence.com/2009/09/23/1089.html

 

参考PPT： http://www.everbox.com/f/Q6v15jClVlNSamuTJkRDSR7BdE

 

参考视频：http://v.youku.com/v_show/id_XMzcxNTY2NDg0.html