资源描述：
《透析JavaScript定时机制》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、透析JavaScript定时机制JavaScript的setTimeout与setInterval是两个很容易欺骗“别人感情”的方法,因为我们开始常常以为调用了就会按既定的方式执行,我想不少人都深有同感,例如：51CTO推荐阅读：JavaScript语法中12个需要绕开的陷阱1.setTimeout( function(){ alert(’你好!’); } , 0); 2.setInterval( callbackFunction , 100); 认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScriptAPI文档明确定义第二个
2、参数意义为隔多少毫秒后,回调方法就会被执行.这里设成0毫秒,理所当然就立即被执行了。同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑！但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:3.div.onclick = function(){ 4.setTimeout( function() 5.{document.getElementById(’inputField’).focus();}, 0); 6.}; 既然是0毫秒后执行,那么还用setTimeout干什么,
3、此刻,坚定的信念已开始动摇，直到最后某一天,你不小心写了一段糟糕的代码:7.setTimeout( function(){ while(true){} } , 100); 8.setTimeout( function(){ alert(’你好!’); } , 200); 9.setInterval( callbackFunction , 200); 第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯！这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想
4、的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会因为痛苦而停止,下面让我们来展开JavaScript线程和定时器探索之旅!出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的，而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些
5、复杂的问题,问题得到简化.那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢？下面结合浏览器内核处理方式简单说明。浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的.虽然每个浏览器内核实现细节不同,但这其中的调用原理都是大
6、同小异.由图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线程关系,这些任务得进行排队,一个接着一个被引擎处理.上图t1-t2..tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务,假设现在是t1时刻,引
7、擎运行在t1对应的任务方块代码内,在这个时间点内,我们来描述一下浏览器内核其它线程的状态.t1时刻:◆GUI渲染线程:该线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行.本文虽然重点解释JavaScript定时机制,但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的,这容易理解,因为JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于
