作者：肥肚
有时候，加载一些广告的时候，我们用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