Promis比setTimeout()更快的原因是什么

本篇內(nèi)容介紹了“Promis比setTimeout()更快的原因是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

實(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)。

打開執(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í)行已完成。

“Promis比setTimeout()更快的原因是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！