先作一個實驗:來看看當即解決的 Promise 和當即超時( 0 毫秒的超時)哪一個執行的更快?javascript
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!'
。當即解決的承諾比當即超時處理得更快。java
是由於 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!'
執行並查看控制檯,結果是同樣的!segmentfault
儘管 setTimeout(..., 0)
在 Promise.resolve(true).then(...)
以前被調用了,可是 'Resolved!'
仍然在 'Timed out!'
以前被輸出。promise
實驗代表,當即解決的 promise 在當即超時以前已獲得處理。因此。。。這是爲何?服務器
與異步 JavaScript 有關的問題能夠經過探索事件循環解答答。先回顧一下異步 JavaScript 的工做原理。微信
調用棧(call stack) 是 LIFO(後進先出)的結構,用於存儲在代碼執行期間建立的執行上下文。簡而言之,調用棧執行用來函數。多線程
Web API 是異步操做(fetch 請求、promises、計時器),回調等待這裏的工做完成。
任務隊列(task queue)是一個 FIFO(先進先出)的結構,其中包含準備好執行的異步操做的回調。例如,超時的 setTimeout()
的回調(準備執行)進入任務隊列中。
工做隊列(job queue) 是一個 FIFO(先進先出)的結構,其中包含準備執行的 promise 的回調。例如,已解決的 resolve 或拒絕回調進入工做隊列中。
最後,事件循環(event loop) 會一直監視調用棧是否爲空。若是調用棧爲空,則事件循環會查找工做隊列或任務隊列,並使準備好執行的回調出隊到調用棧中。
下面從事件循環的角度來看一下前面的實驗。我會逐步分析代碼的執行狀況。
setTimeout(..., 0)
並「安排」一個計時器。 timeout()
回調存儲在 Web API 中:setTimeout(function timeout() { console.log('Timed out!');}, 0); Promise.resolve(1).then(function resolve() { console.log('Resolved!'); });
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!');});
timeout()
被「排隊」到任務隊列,promise 回調 resolve()
被「排隊」到工做隊列:resolve()
從工做隊列中出隊,並將其放入調用棧中,而後調用棧執行 promise 回調 resolve()
:setTimeout(function timeout() { console.log('Timed out!'); }, 0); Promise.resolve(1).then(function resolve() { console.log('Resolved!');});
'Resolved!'
被輸出到控制檯。
timeout()
從任務隊列中移出到調用棧中。而後調用棧執行計時器回調timeout()
:setTimeout(function timeout() { console.log('Timed out!');}, 0); Promise.resolve(1).then(function resolve() { console.log('Resolved!'); });
'Timed out!'
已輸出到控制檯。
此時調用棧爲空。腳本執行已完成。
爲何當即解決的 promise 比當即計時器處理得更快?
是因爲事件循環的「優先級」使任務隊列(存儲已實現的 promise 的回調)中的任務從任務隊列(存儲超時的setTimeout()
回調)中的任務中出隊。