setTimeout与setInterval

JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,由于咱们开始经常觉得调用了就会按既定的方式执行, 我想很多人都深有同感, 例如

 

[javascript]
setTimeout( function(){ alert(’你好!’); } , 0); 
setInterval( callbackFunction , 100); 
setTimeout( function(){ alert(’你好!’); } , 0);
setInterval( callbackFunction , 100);

 

认为setTimeout中的问候方法会当即被执行,由于这并非凭空而说,而是JavaScript API文档明肯定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所固然就当即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就当即被执行深信不疑!

 

但随着JavaScript应用开发经验不断的增长和丰富,有一天你发现了一段怪异的代码而百思不得其解:

 

 

 

[javascript]
div.onclick = function(){ 
    setTimeout( function(){document.getElementById(’inputField’).focus();}, 0); 
}; 
div.onclick = function(){
    setTimeout( function(){document.getElementById(’inputField’).focus();}, 0);
};

 

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚决的信念已开始动摇.

 

直到最后某一天 , 你不当心写了一段糟糕的代码:

 

[javascript]
setTimeout( function(){ while(true){} } , 100); 
setTimeout( function(){ alert(’你好!’); } , 200); 
setInterval( callbackFunction , 200); 
setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert(’你好!’); } , 200);
setInterval( callbackFunction , 200);

 

 

 

第一行代码进入了死循环,但不久你就会发现,第二,第三行并非预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

 

这时你完全迷惘了,这种情景是难以接受的,由于改变长久以来既定的认知去接受新思想的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会由于痛苦而中止,下面让咱们来展开JavaScript线程和定时器探索之旅!

 

拔开云雾见月明 www.2cto.com

 

出现上面全部误区的最主要一个缘由是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.

 

而事实上的,JavaScript使用了障眼法,在多数时候骗过了咱们的眼睛,这里背光得澄清一个事实:

 

JavaScript引擎是单线程运行的,浏览器不管在何时都只且只有一个线程在运行JavaScript程序.

 

JavaScript引擎用单线程运行也是有意义的,单线程没必要理会线程同步这些复杂的问题,问题获得简化.

 

那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?
下面结合浏览器内核处理方式简单说明.

 

浏览器内核实现容许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线 程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些之外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产 生不一样的异步事件,下面经过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通讯的.虽然每一个浏览器内核实现细节不一样,但这其中的 调用原理都是大同小异.