爲何 Promise 比 setTimeout() 更快？

實驗

先作一個實驗：來看看當即解決的 Promise 和當即超時（ 0 毫秒的超時）哪一個執行的更快？

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) 是一個靜態函數，可返回當即解決的 promise。 setTimeout(callback, 0) 執行延遲爲 0 毫秒的回調。

打開執行並檢查控制檯。您會看到日誌先打印了 'Resolved!' ，而後打印了 'Timeout completed!'。當即解決的承諾比當即超時處理得更快。

是由於 Promise.resolve(true).then(...) 在 setTimeout(..., 0) 以前被調用了，因此 promise 的處理過程會更快嗎？

那咱們就修改一下實驗條件，先調用 setTimeout(...，0)：

setTimeout(function timeout() {
  console.log('Timed out!');
}, 0);

Promise.resolve(1).then(function resolve() {
  console.log('Resolved!');
});

// logs 'Resolved!'
// logs 'Timed out!'
複製代碼

執行並查看控制檯，結果是同樣的！

儘管 setTimeout(..., 0) 在 Promise.resolve(true).then(...) 以前被調用了，可是 'Resolved!' 仍然在 'Timed out!' 以前被輸出。

實驗代表，當即解決的 promise 在當即超時以前已獲得處理。因此。。。這是爲何？

事件循環

與異步 JavaScript 有關的問題能夠經過探索事件循環解答答。先回顧一下異步 JavaScript 的工做原理。

調用棧（call stack） 是 LIFO（後進先出）的結構，用於存儲在代碼執行期間建立的執行上下文。簡而言之，調用棧執行用來函數。

Web API 是異步操做（fetch 請求、promises、計時器），回調等待這裏的工做完成。

**任務隊列（task queue）**是一個 FIFO（先進先出）的結構，其中包含準備好執行的異步操做的回調。例如，超時的 setTimeout() 的回調（準備執行）進入任務隊列中。

工做隊列（job queue） 是一個 FIFO（先進先出）的結構，其中包含準備執行的 promise 的回調。例如，已解決的 resolve 或拒絕回調進入工做隊列中。

最後，事件循環（event loop） 會一直監視調用棧是否爲空。若是調用棧爲空，則事件循環會查找工做隊列或任務隊列，並使準備好執行的回調出隊到調用棧中。

工做隊列與任務隊列

下面從事件循環的角度來看一下前面的實驗。我會逐步分析代碼的執行狀況。

1. 調用堆棧執行 setTimeout(..., 0) 並「安排」一個計時器。 timeout() 回調存儲在 Web API 中：

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

2. 調用棧執行 Promise.resolve(true).then(resolve) 並「安排」一個 promise 解析。 resolved() 回調存儲在 Web API 中：

setTimeout(function timeout() {
  console.log('Timed out!');
}, 0);

Promise.resolve(1).then(function resolve() {  console.log('Resolved!');});
複製代碼

3. promise 當即解決，計時器當即超時。這時計時器回調 timeout() 被「排隊」到任務隊列，promise 回調 resolve() 被「排隊」到工做隊列：

4.  這裏是最有意思部分：事件循環優先級使工做排在任務之上。事件循環使 promise 回調 resolve() 從工做隊列中出隊，並將其放入調用棧中，而後調用棧執行 promise 回調 resolve()：

setTimeout(function timeout() {
  console.log('Timed out!');
}, 0);

Promise.resolve(1).then(function resolve() {
  console.log('Resolved!');});
複製代碼

'Resolved!' 被輸出到控制檯。

5. 最後，事件循環把計時器回調 timeout() 從任務隊列中移出到調用棧中。而後調用棧執行計時器回調timeout()：

setTimeout(function timeout() {
  console.log('Timed out!');}, 0);

Promise.resolve(1).then(function resolve() {
  console.log('Resolved!');
});
複製代碼

'Timed out!' 已輸出到控制檯。

此時調用棧爲空。腳本執行已完成。

總結

爲何當即解決的 promise 比當即計時器處理得更快？

是因爲事件循環的「優先級」使任務隊列（存儲已實現的 promise 的回調）中的任務從任務隊列（存儲超時的setTimeout() 回調）中的任務中出隊。

歡迎關注個人公衆號：前端先鋒