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引擎與另外那些線程是怎樣互動通訊的.雖然每一個瀏覽器內核實現細節不一樣,但這其中的 調用原理都是大同小異.