Javascript：必須知道的Javascript知識點之“單線程事件驅動”

代碼示例

 1 var intervalBody = function(){
 2     console.log('interval');
 3 }
 4 
 5 var startInterval = function(){
 6     setInterval(intervalBody,1000);
 7 }
 8 
 9 var timeoutBody = function(){
10     console.log('timeout');
11 }
12 
13 var startTimeout = function(){
14     setTimeout(timeoutBody,1000);
15 }
16 
17 var sleep = function(second){
18     var current = new Date().setSeconds(new Date().getSeconds() + second);
19     while(new Date() < current){ }
20 }
21 
22 startInterval();
23 startTimeout();
24 sleep(2);
25 console.log('sleep once');
26 sleep(2);
27 console.log('sleep again');

執行結果

發生了什么事情

執行規則

規則1

事件驅動的單線程模型，所有javascript的代碼都在一個線程中執行，javascript線程從事件隊列中一次取出一個事件進行執行。

規則2

宿主中除了javascript線程外，還有定時器線程（setInterval和setTimeout會觸發這兩個線程執行）、瀏覽器事件觸發線程（這個線程會觸發onclick、onmousemove和其它瀏覽器事件）、AJAX請求線程；所有這些線程觸發的事件（回調）都會加入到事件隊列的尾部。

規則3

當瀏覽器加載完html文檔后，會將當前html的所有的js代碼作為事件隊列的第一個事件，其它線程觸發的事件（回調）都會加入到事件隊列的尾部。

規則4

setTimeout和setInterval中的回調的執行時間肯定是大於為其指定的秒數。

瀏覽器渲染線程

假如javascript執行線程執行了A事件，在A事件執行的過程中修改了DOM，這些DOM的修改不會立即反應到界面上，而是當A事件執行完畢后，javascript線程會被阻塞，這時瀏覽器渲染線程會渲染DOM的修改結果，等瀏覽器渲染線程執行完畢后，javascript線程才繼續運行。

代碼示例

1 var sleep = function(second){
2     var current = new Date().setSeconds(new Date().getSeconds() + second);
3     while(new Date() < current){ }
4 }
5 
6 document.body.innerHTML = '段光偉';
7 sleep(5);

備注

暈暈乎乎了5年，看完nodejs以后才知道javascript是單線程事件驅動的執行模型，我感覺我現在理解的還不夠深刻，找個時間一定要讀讀Ecma-262規范。