好程式設計師web前端分享如何理解JS的單執行緒

好程式設計師 web 前端分享如何理解 JS 單執行緒， JS 本質是單執行緒的。也就是說，它並不能像 JAVA 語言那樣，兩個執行緒併發執行。

 

但我們平時看到的 JS ，分明是可以同時運作很多工的，這又是怎麼回事呢？

 

首先， JS 的程式碼，大致分為兩類，同步程式碼和非同步程式碼。

 

console.log(1)

console.log(2)

console.log(3)

這是典型的同步程式碼，編寫順序就是執行順序。

 

JS 引擎的主執行緒負責執行程式碼，由於只有這一個執行緒，執行當然是同步的，即按照順序來。另外，還有一個叫做任務佇列的東西，所有的非同步程式碼都是從佇列當中來。

 

 

所以實際上我們會發現， JS 根本不可能同時執行兩個任務，本質上還是單執行緒。

 

在 JS 中，所謂的非同步任務，有三種：

第一，    滑鼠鍵盤事件觸發 ，例如 onclick 、 onkeydown 等等

第二，    網路事件觸發 ，例如 onload 、 onerror 等等

第三，    定時器 ，例如 setTimeout 、 setInterval

 

因為這些任務的發生都不是在當下，而是過段時間以後再執行。因此時間不可控，你不能因為 5 秒後要執行一個函式，就讓主執行緒閒置 5 秒什麼都不幹吧？所以你只能繼續執行後續的同步程式碼。而當你單擊滑鼠或滾動視窗時，主執行緒可能正在執行其它程式碼，忙著呢！沒工夫處理，因此，事件觸發執行緒就負責來接收這個事件，並把要執行的任務暫時儲存在任務佇列當中。等主執行緒把手裡的同步程式碼執行完，就立刻會向任務佇列提取最新的任務。

 

這也就解釋了為什麼我們總把 JS 的非同步函式叫做回撥了，因為真的不是馬上執行，而是回頭再調的！

 

我們來看個簡單的例子：

setTimeout( “console.log(2)” ,  );
console.log( 1 );

 

反覆執行這段程式碼，結果都是先列印 1 再列印 2

因為， setTimeout 是個非同步任務， 第二個引數真正的含義是，在 毫秒之後，將程式碼插入任務佇列，而不是在 毫秒之後執行。

 

當插入任務佇列後，主執行緒會繼續執行後續的程式碼，也就是列印結果 1 ，如果此時當前的同步程式碼已經執行完畢，則主執行緒立刻會從任務佇列中取出最新任務執行。再列印結果 2。

平時我們使用定時器，時間往往不準確，就是因為在加入任務佇列時，前面可能已經有好多工在排隊了，你明明寫了 80ms的延遲，可是卻等了100ms才出現結果。

 

同時，我們也理解了，為什麼 setInterval 的時間間隔不能設為 ，一般情況下瀏覽器允許的最小值為 16ms ，因為如果設成 的話，對於瀏覽器來講，壓力簡直太大了，定時器觸發執行緒會玩命兒的往佇列中插入任務，而不是完成一個再插入一個。

 

我們再看一個關於 ajax 的例子

 

var req = newXMLHttpRequest();

req.open( “get“ ,  ““ );

req.onload =function(){......}

req.send();

 

我曾經在課堂跟學生講課的時候，不小心把這個概念給講錯了，我當時說 send 方法和 onload 是不可以交換順序的，實際上完全沒有影響。被我誤導的同學，我表示萬分抱歉！希望此貼可以彌補我的罪過。

 

為什麼說 send 方法和 onload 交換順序完全沒有問題呢？   因為 send 是一個非同步方法，也就是當我們把程式碼寫成這樣：

var req = newXMLHttpRequest();

req.open( “get“ ,  ““ );

req.send();

req.onload =function(){......}

 

主執行緒在 send 方法執行時，由於是非同步方法，因此它不會立刻執行，而是存入任務佇列，然後繼續向下執行程式碼，新增 onload 事件。所以 send 方法無論如何都會在新增 onload 事件之後再執行，因此順序顛倒是無關要緊的。 不過需要提醒的是， onload 事件在新增時，並不會加入任務佇列，而是通知 網路事件觸發執行緒 ，一旦網路請求結束，事件被觸發，該執行緒便會立刻向任務佇列中加入這個 onload函式，從而完成回撥。

 

 

最後我們用一個完整的例子來觀察一下 JS 如何以單執行緒執行程式碼

 

setTimeout( a, 0);

setInterval( b,500);

for(......){

// 假設迴圈執行了大量操作，花費時間 1000ms

// 而在 for 迴圈執行期間，使用者透過滑鼠觸發了一次單擊事件

}

console.log(123);

setInterval(c,250);

那麼任務佇列的情況如下：

a

b

click

b

c

c

b

c

c

b

...

 

我們按順序來解釋一下：

任務 a ，由於延遲為 ，則以最短時間立即加入佇列。

任務 b ，等待 500ms 後，加入佇列，此時 for 迴圈執行過半

任務 click ，由於發生在 for 迴圈執行期間，所以此時出現

任務 b ， for 迴圈結束時，又過了 500ms ，因此加入 b

任務 c ，從 for 迴圈結束時開始計時， 250ms 後加入 c

任務 c ，因為又過了 250ms

任務 b ，與此同時，距離上次加入 b 間隔為 500ms ，因此加入 b

往後，每出現兩次 c ，出現一次 b

 

OK ！今天的課到此結束，同學們再見！   有問題請留言。