一道面試題引發(fā)的思考 --- Event Loop

betacat 發(fā)布于2019-08-23 14:13 / 3288人閱讀

摘要：想必面試題刷的多的同學(xué)對(duì)下面這道題目不陌生，能夠立即回答出輸出個(gè)，可是你真的懂為什么嗎為什么是輸出為什么是輸出個(gè)這兩個(gè)問題在我腦邊縈繞。同步任務(wù)都好理解，一個(gè)執(zhí)行完執(zhí)行下一個(gè)。本文只是我對(duì)這道面試題的一點(diǎn)思考，有誤的地方望批評(píng)指正。

想必面試題刷的多的同學(xué)對(duì)下面這道題目不陌生，能夠立即回答出輸出10個(gè)10，可是你真的懂為什么嗎？為什么是輸出10？為什么是輸出10個(gè)10？這兩個(gè)問題在我腦邊縈繞。嗯，我得說服自己。

for (var i = 0; i < 10; i++) {
  setTimeout(() => {
    console.log(i)
  }, 0)
}

JavaScript 是單線程。（ok，我又問自己它為什么是單線程 ==》作為瀏覽器語言，JS的用途是與用戶交互以及操作DOM，如果是多線程會(huì)引發(fā)很多問題，瀏覽器無法判斷以哪個(gè)線程為標(biāo)準(zhǔn)，因此它只能是單線程）
任務(wù)分為「同步任務(wù)」與「異步任務(wù)」。同步任務(wù)都好理解，一個(gè)執(zhí)行完執(zhí)行下一個(gè)。異步任務(wù)稍許復(fù)雜。
異步任務(wù)運(yùn)行機(jī)制：

同步任務(wù)在「主線程」上執(zhí)行，形成一個(gè)「執(zhí)行棧」（execution context stack）

主線程之外，還有一個(gè)「任務(wù)隊(duì)列」（task queue），異步任務(wù)有了運(yùn)行結(jié)果，就在任務(wù)隊(duì)列里放置一個(gè)事件

執(zhí)行棧中同步任務(wù)執(zhí)行完，就會(huì)去讀取任務(wù)隊(duì)列的事件，異步任務(wù)事件結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧執(zhí)行

主線程重復(fù)前面三步

其實(shí)屢清楚很好理解，以上運(yùn)行機(jī)制又稱為 Event Loop（事件循環(huán)）
我們回到這道面試題, 一起來理解下：

for 循環(huán)是同步任務(wù)，setTimeout 是異步任務(wù)
首先 for 循環(huán)在主線程上執(zhí)行，setTimeout 進(jìn)入任務(wù)隊(duì)列
同步任務(wù)執(zhí)行完，i = 10,此時(shí) setTimeout 被喚醒進(jìn)入執(zhí)行棧執(zhí)行
因此輸出的值為10
可是為什么會(huì)輸出10個(gè)10呢？到現(xiàn)在我還是沒有完全說服自己。

我們對(duì)代碼稍作修改，

for (var i = 0; i < 10; i++) {
  console.log(i)
  var p = setTimeout(() => {
    console.log(i)
  }, 0)
  console.log(p)
}

輸出結(jié)果

0
Timeout {_called: false, _idleTimeout: 1, _idlePrev: TimersList, _idleNext: TimersList, _idleStart: 1893, …}
1
Timeout {_called: false, _idleTimeout: 1, _idlePrev: TimersList, _idleNext: Timeout, _idleStart: 3739, …}
2
Timeout {_called: false, _idleTimeout: 1, _idlePrev: TimersList, _idleNext: Timeout, _idleStart: 4924, …}
......
9
Timeout {_called: false, _idleTimeout: 1, _idlePrev: TimersList, _idleNext: Timeout, _idleStart: 11733, …}
10
10
...
10

看到這個(gè)結(jié)果大家是否有些清楚了呢，我們重新梳理下原先的面試題

首先 for 循環(huán)在主線程上執(zhí)行，setTimeout 內(nèi)部的回調(diào)函數(shù)進(jìn)入任務(wù)隊(duì)列
for 循環(huán)里，i 每次執(zhí)行一次，異步隊(duì)列里放置一個(gè) setTimeout 回調(diào)
同步任務(wù)執(zhí)行完，i = 10, 此時(shí)異步隊(duì)列里放置了10個(gè)回調(diào)事件
setTimeout 被喚醒進(jìn)入執(zhí)行棧執(zhí)行
因此輸出了10個(gè)10

當(dāng)然了， Event Loop 的知識(shí)不止這點(diǎn)，涉及到的東西也很多。本文只是我對(duì)這道面試題的一點(diǎn)思考，有誤的地方望批評(píng)指正。

以下幾篇是我收藏的好文，供大家學(xué)習(xí)參考~
JavaScript 運(yùn)行機(jī)制詳解：再談Event Loop
這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制
從event loop規(guī)范探究javaScript異步及瀏覽器更新渲染時(shí)機(jī)