好程序員 web 前端分享如何理解 JS 單線程， JS 本質(zhì)是單線程的。也就是說，它并不能像 JAVA 語言那樣，兩個線程并發(fā)執(zhí)行。

創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)灣里,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

但我們平時看到的 JS ，分明是可以同時運(yùn)作很多任務(wù)的，這又是怎么回事呢？

首先， JS 的代碼，大致分為兩類，同步代碼和異步代碼。

console.log(1)

console.log(2)

console.log(3)

這是典型的同步代碼，編寫順序就是執(zhí)行順序。

JS 引擎的主線程負(fù)責(zé)執(zhí)行代碼，由于只有這一個線程，執(zhí)行當(dāng)然是同步的，即按照順序來。另外，還有一個叫做任務(wù)隊列的東西，所有的異步代碼都是從隊列當(dāng)中來。

所以實(shí)際上我們會發(fā)現(xiàn)， JS 根本不可能同時執(zhí)行兩個任務(wù)，本質(zhì)上還是單線程。

在 JS 中，所謂的異步任務(wù)，有三種：

第一，    鼠標(biāo)鍵盤事件觸發(fā) ，例如 onclick 、 onkeydown 等等

第二，    網(wǎng)絡(luò)事件觸發(fā) ，例如 onload 、 onerror 等等

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

因?yàn)檫@些任務(wù)的發(fā)生都不是在當(dāng)下，而是過段時間以后再執(zhí)行。因此時間不可控，你不能因?yàn)? 5 秒后要執(zhí)行一個函數(shù)，就讓主線程閑置 5 秒什么都不干吧？所以你只能繼續(xù)執(zhí)行后續(xù)的同步代碼。而當(dāng)你單擊鼠標(biāo)或滾動窗口時，主線程可能正在執(zhí)行其它代碼，忙著呢！沒工夫處理，因此，事件觸發(fā)線程就負(fù)責(zé)來接收這個事件，并把要執(zhí)行的任務(wù)暫時保存在任務(wù)隊列當(dāng)中。等主線程把手里的同步代碼執(zhí)行完，就立刻會向任務(wù)隊列提取最新的任務(wù)。

這也就解釋了為什么我們總把 JS 的異步函數(shù)叫做回調(diào)了，因?yàn)檎娴牟皇邱R上執(zhí)行，而是回頭再調(diào)的！

我們來看個簡單的例子：

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

反復(fù)執(zhí)行這段代碼，結(jié)果都是先打印 1 再打印 2

因?yàn)椋? setTimeout 是個異步任務(wù)， 第二個參數(shù)真正的含義是，在 毫秒之后，將代碼插入任務(wù)隊列，而不是在 毫秒之后執(zhí)行。

當(dāng)插入任務(wù)隊列后，主線程會繼續(xù)執(zhí)行后續(xù)的代碼，也就是打印結(jié)果 1 ，如果此時當(dāng)前的同步代碼已經(jīng)執(zhí)行完畢，則主線程立刻會從任務(wù)隊列中取出最新任務(wù)執(zhí)行。再打印結(jié)果 2。

平時我們使用定時器，時間往往不準(zhǔn)確，就是因?yàn)樵诩尤肴蝿?wù)隊列時，前面可能已經(jīng)有好多任務(wù)在排隊了，你明明寫了 80ms的延遲，可是卻等了100ms才出現(xiàn)結(jié)果。

同時，我們也理解了，為什么 setInterval 的時間間隔不能設(shè)為 ，一般情況下瀏覽器允許的最小值為 16ms ，因?yàn)槿绻O(shè)成 的話，對于瀏覽器來講，壓力簡直太大了，定時器觸發(fā)線程會玩命兒的往隊列中插入任務(wù)，而不是完成一個再插入一個。

我們再看一個關(guān)于 ajax 的例子

var req = newXMLHttpRequest();

req.open( “get“ ,  “http://xxxxxxxx“ );

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

req.send();

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

為什么說 send 方法和 onload 交換順序完全沒有問題呢？   因?yàn)? send 是一個異步方法，也就是當(dāng)我們把代碼寫成這樣：

var req = newXMLHttpRequest();

req.open( “get“ ,  “http://xxxxxxxx“ );

req.send();

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

主線程在 send 方法執(zhí)行時，由于是異步方法，因此它不會立刻執(zhí)行，而是存入任務(wù)隊列，然后繼續(xù)向下執(zhí)行代碼，添加 onload 事件。所以 send 方法無論如何都會在添加 onload 事件之后再執(zhí)行，因此順序顛倒是無關(guān)要緊的。 不過需要提醒的是， onload 事件在添加時，并不會加入任務(wù)隊列，而是通知 網(wǎng)絡(luò)事件觸發(fā)線程 ，一旦網(wǎng)絡(luò)請求結(jié)束，事件被觸發(fā)，該線程便會立刻向任務(wù)隊列中加入這個 onload函數(shù)，從而完成回調(diào)。

最后我們用一個完整的例子來觀察一下 JS 如何以單線程執(zhí)行代碼

setTimeout( a, 0);

setInterval( b,500);

for(......){

// 假設(shè)循環(huán)執(zhí)行了大量操作，花費(fèi)時間 1000ms

// 而在 for 循環(huán)執(zhí)行期間，用戶通過鼠標(biāo)觸發(fā)了一次單擊事件

}

console.log(123);

setInterval(c,250);

那么任務(wù)隊列的情況如下：

我們按順序來解釋一下：

任務(wù) a ，由于延遲為 ，則以最短時間立即加入隊列。

任務(wù) b ，等待 500ms 后，加入隊列，此時 for 循環(huán)運(yùn)行過半

任務(wù) click ，由于發(fā)生在 for 循環(huán)執(zhí)行期間，所以此時出現(xiàn)

任務(wù) b ， for 循環(huán)結(jié)束時，又過了 500ms ，因此加入 b

任務(wù) c ，從 for 循環(huán)結(jié)束時開始計時， 250ms 后加入 c

任務(wù) c ，因?yàn)橛诌^了 250ms

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

往后，每出現(xiàn)兩次 c ，出現(xiàn)一次 b

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