小編給大家分享一下Promise比setTimeout()快的原因有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)主要從事網(wǎng)頁設計、PC網(wǎng)站建設（電腦版網(wǎng)站建設）、wap網(wǎng)站建設（手機版網(wǎng)站建設）、成都響應式網(wǎng)站建設公司、程序開發(fā)、網(wǎng)站優(yōu)化、微網(wǎng)站、小程序定制開發(fā)等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設行業(yè)積累了豐富的成都網(wǎng)站建設、網(wǎng)站設計、網(wǎng)站設計、網(wǎng)絡營銷經(jīng)驗，集策劃、開發(fā)、設計、營銷、管理等多方位專業(yè)化運作于一體。

為什么 Promise 比setTimeout() 快？

1.實驗

我們來做個實驗。哪個執(zhí)行得更快:立即解決的 Promise 還是立即setTimeout(也就是0毫秒的setTimeout)?

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

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

// 'Resolved!'
// 'Timed out!'

promise.resolve(1)是一個靜態(tài)函數(shù)，它返回一個立即解析的promise。setTimeout(callback, 0)以0毫秒的延遲執(zhí)行回調函數(shù)。

我們可以看到先打印'Resolved!'，再打印Timeout completed!，立即解決的 promise 比立即setTimeout更快。

是因為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!');
});

// 'Resolved!'
// 'Timed out!'

setTimeout(..., 0)在Promise.resolve(true).then(...)之前被調用。但，還是先打印Resolved!在打印'Timed out!'。

這是為啥呢？

2.事件循環(huán)

與異步 JS 相關的問題可以通過研究事件循環(huán)來回答。我們回顧一下異步 JS 工作方式的主要組成部分。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Lt9zVHTf-1611275604640)(/img/bVcMQaI)]

調用堆棧是一個LIFO(后進先出)結構，它存儲在代碼執(zhí)行期間創(chuàng)建的執(zhí)行上下文。簡單地說，調用堆棧執(zhí)行這些函數(shù)。

Web api是異步操作(fetch 請求、promise、計時器)及其回調等待完成的地方。

**task queue （任務隊列）是一個FIFO(先進先出)**結構，它保存準備執(zhí)行的異步操作的回調。例如，超時的setTimeout()的回調函數(shù)或準備執(zhí)行的單擊按鈕事件處理程序都在任務隊列中排隊。

**job queue （作業(yè)隊列）**是一個FIFO(先入先出)結構，它保存準備執(zhí)行的promise 的回調。例如，已完成的承諾的resolve或reject回調被排在作業(yè)隊列中。

最后，事件循環(huán)永久監(jiān)聽調用堆棧是否為空。如果調用堆棧為空，則事件循環(huán)查看作業(yè)隊列或任務隊列，并將準備執(zhí)行的任何回調分派到調用堆棧中。

3.作業(yè)隊列與任務隊列

我們從事件循環(huán)的角度來看這個實驗，我將對代碼執(zhí)行進行一步一步的分析。

A）調用堆棧執(zhí)行setTimeout(..., 0)并計劃一個計時器，timeout()回調存儲在Web API中：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-SLk0AUa5-1611275604642)(/img/bVcMQdg)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Zr7usYTK-1611275604643)(/img/bVcMQc9)]

B）調用堆棧執(zhí)行Promise.resolve(true).then(resolve)并安排一個promise 解決方案。resolved()回調存儲在Web API中：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-JTwSnLYS-1611275604646)(/img/bVcMQdh)]

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-k5cRhqzN-1611275604648)(/img/bVcMQdi)]

C)promise 立即被解析，同時計時器也立即執(zhí)行。這樣，定時器回調timeout()進入任務隊列，promise回調resolve()進入作業(yè)隊列

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-iMfLB2YJ-1611275604649)(/img/bVcMQdS)]

D）現(xiàn)在是有趣的部分：作業(yè)隊列(微任務)優(yōu)先級高于任務隊列(宏任務)。 事件循環(huán)從作業(yè)隊列中取出promise回調resolve()并將其放入調用堆棧中。 然后，調用堆棧執(zhí)行promise回調resolve()：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-nnqfgoo1-1611275604650)(/img/bVcMQey)]

E）最后，事件循環(huán)將計時器回調timeout()從任務隊列中出隊到調用堆棧中。 然后，調用堆棧執(zhí)行計時器回調timeout()：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Fj54WaI0-1611275604650)(/img/bVcMQeB)]

調用堆棧為空，已完成腳本的執(zhí)行。

以上是“Promise比setTimeout()快的原因有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：Promise比setTimeout()快的原因有哪些-創(chuàng)新互聯(lián)
本文路徑：http://weahome.cn/article/djpicd.html