實(shí)驗(yàn)

先做一個(gè)實(shí)驗(yàn)：來看看立即解決的 Promis 和立即超時(shí)( 0 毫秒的超時(shí))哪個(gè)執(zhí)行的更快?

Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!'); 
}); 
 
setTimeout(function timeout() { 
  console.log('Timed out!'); 
}, 0); 
 
// logs 'Resolved!' 
// logs 'Timed out!' 

Promise.resolve(1) 是一個(gè)靜態(tài)函數(shù)，可返回立即解決的 promise。setTimeout(callback, 0) 執(zhí)行延遲為 0 毫秒的回調(diào)。

[[375601]]

打開執(zhí)行并檢查控制臺(tái)。您會(huì)看到日志先打印了 'Resolved!' ，然后打印了 'Timeout completed!'。立即解決的承諾比立即超時(shí)處理得更快。

是因?yàn)?Promise.resolve(true).then(...) 在 setTimeout(..., 0) 之前被調(diào)用了，所以 promise 的處理過程會(huì)更快嗎?

那我們就修改一下實(shí)驗(yàn)條件，先調(diào)用 setTimeout(...，0)：

setTimeout(function timeout() { 
  console.log('Timed out!'); 
}, 0); 
 
Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!'); 
}); 
 
// logs 'Resolved!' 
// logs 'Timed out!' 

執(zhí)行并查看控制臺(tái)，結(jié)果是一樣的!

盡管 setTimeout(..., 0) 在 Promise.resolve(true).then(...) 之前被調(diào)用了，但是 'Resolved!' 仍然在 'Timed out!' 之前被輸出。

實(shí)驗(yàn)表明，立即解決的 promise 在立即超時(shí)之前已得到處理。所以。。。這是為什么?

事件循環(huán)

與異步 JavaScript 有關(guān)的問題可以通過探索事件循環(huán)解答答。先回顧一下異步 JavaScript 的工作原理。

空的事件循環(huán)

調(diào)用棧(call stack) 是 LIFO(后進(jìn)先出)的結(jié)構(gòu)，用于存儲(chǔ)在代碼執(zhí)行期間創(chuàng)建的執(zhí)行上下文。簡而言之，調(diào)用棧執(zhí)行用來函數(shù)。

Web API 是異步操作(fetch 請求、promises、計(jì)時(shí)器)，回調(diào)等待這里的工作完成。

**任務(wù)隊(duì)列(task queue)**是一個(gè) FIFO(先進(jìn)先出)的結(jié)構(gòu)，其中包含準(zhǔn)備好執(zhí)行的異步操作的回調(diào)。例如，超時(shí)的 setTimeout() 的回調(diào)(準(zhǔn)備執(zhí)行)進(jìn)入任務(wù)隊(duì)列中。

工作隊(duì)列(job queue) 是一個(gè) FIFO(先進(jìn)先出)的結(jié)構(gòu)，其中包含準(zhǔn)備執(zhí)行的 promise 的回調(diào)。例如，已解決的 resolve 或拒絕回調(diào)進(jìn)入工作隊(duì)列中。

最后，事件循環(huán)(event loop) 會(huì)一直監(jiān)視調(diào)用棧是否為空。如果調(diào)用棧為空，則事件循環(huán)會(huì)查找工作隊(duì)列或任務(wù)隊(duì)列，并使準(zhǔn)備好執(zhí)行的回調(diào)出隊(duì)到調(diào)用棧中。

工作隊(duì)列與任務(wù)隊(duì)列

下面從事件循環(huán)的角度來看一下前面的實(shí)驗(yàn)。我會(huì)逐步分析代碼的執(zhí)行情況。

(1) 調(diào)用堆棧執(zhí)行 setTimeout(..., 0) 并“安排”一個(gè)計(jì)時(shí)器。timeout() 回調(diào)存儲(chǔ)在 Web API 中：

setTimeout(function timeout() {  console.log('Timed out!');}, 0); 
Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!'); 
}); 

事件循環(huán)

(2) 調(diào)用棧執(zhí)行 Promise.resolve(true).then(resolve) 并“安排”一個(gè) promise 解析。resolved() 回調(diào)存儲(chǔ)在 Web API 中：

setTimeout(function timeout() { 
  console.log('Timed out!'); 
}, 0); 
 
Promise.resolve(1).then(function resolve() {  console.log('Resolved!');}); 

事件循環(huán)

(3) promise 立即解決，計(jì)時(shí)器立即超時(shí)。這時(shí)計(jì)時(shí)器回調(diào) timeout() 被“排隊(duì)”到任務(wù)隊(duì)列，promise 回調(diào) resolve() 被“排隊(duì)”到工作隊(duì)列：

事件循環(huán)

(4) 這里是最有意思部分：事件循環(huán)優(yōu)先級(jí)使工作排在任務(wù)之上。事件循環(huán)使 promise 回調(diào) resolve() 從工作隊(duì)列中出隊(duì)，并將其放入調(diào)用棧中，然后調(diào)用棧執(zhí)行 promise 回調(diào) resolve()：

setTimeout(function timeout() { 
  console.log('Timed out!'); 
}, 0); 
 
Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!');}); 

'Resolved!' 被輸出到控制臺(tái)。

Event Loop

(5) 最后，事件循環(huán)把計(jì)時(shí)器回調(diào) timeout() 從任務(wù)隊(duì)列中移出到調(diào)用棧中。然后調(diào)用棧執(zhí)行計(jì)時(shí)器回調(diào)timeout()：

setTimeout(function timeout() { 
  console.log('Timed out!');}, 0); 
 
Promise.resolve(1).then(function resolve() { 
  console.log('Resolved!'); 
}); 

'Timed out!' 已輸出到控制臺(tái)。

Event Loop

此時(shí)調(diào)用棧為空。腳本執(zhí)行已完成。

總結(jié)

為什么立即解決的 promise 比立即計(jì)時(shí)器處理得更快?

是由于事件循環(huán)的“優(yōu)先級(jí)”使任務(wù)隊(duì)列(存儲(chǔ)已實(shí)現(xiàn)的 promise 的回調(diào))中的任務(wù)從任務(wù)隊(duì)列(存儲(chǔ)超時(shí)的setTimeout() 回調(diào))中的任務(wù)中出隊(duì)。