JavaScript中promise和setTimeout執行順序的問題（程式碼範例）

這篇文章帶給大家的內容是關於JavaScript中promise和setTimeout執行順序的問題（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

promise為es6引進的語言標準，為非同步程式設計的一種解決方案；

閱讀此文的前提是了解瀏覽器event loop的機制，還有promise的基本用法和特性，例如他自執行特性、狀態不可逆特性等

拋出問題

且看下面程式碼和問題

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve){
    console.log(2)
    for( var i=0 ; i<10000 ; i++ ){
        i==9999 && resolve()
    }
    console.log(3)
}).then(function(){
    console.log(4)
});
console.log(5);
// 这的问题是，为什么答案是 2 3 5 4 1
// 而不是 2 3 5 1 4

既然promise.then和setTimeout都是異步的，那麼在事件循環佇列中 promise.then的事件應該排在setTimeout後面，那為什麼promise.then卻在setTimeout前面被印了出來？

重要概念

event loop 的概念

• #Javascript是單一執行緒的，所有的同步任務都會在主執行緒中執行。

• 當主執行緒中的任務，都執行完之後，系統會 「依序」 讀取任務佇列裡的事件。與之相對應的非同步任務進入主線程，開始執行。

• 非同步任務之間，會有差異，所以它們執行的優先順序也會有差異。大致分為 微任務（micro task，如：Promise、MutaionObserver等）和巨集任務（macro task，如：setTimeout、setInterval、I/O等）。

• Promise 執行器中的程式碼會被同步調用，但是回呼是基於微任務的。

• 巨集任務的優先順序高於微任務

• #每一個巨集任務執行完畢都必須將目前的微任務佇列清空

• 第一個script 標籤的程式碼是第一個巨集任務

• #主執行緒會不斷重複上面的步驟，直到執行完所有任務。

我的理解

我們來捋一遍程式碼的執行過程，

所有的程式碼都寫在script標籤中，所以讀取所有程式碼是第一個巨集任務，我們開始執行第一個巨集任務。

我們先遇到setTimeout，他是第二個巨集任務，將它丟進巨集任務事件佇列先排隊。

下來我們遇到promise，promise執行器裡的程式碼會被同步調用，所以我們依序列印出2和3。

下來遇到promise的回調，他是一個微任務，將它丟進微任務事件對列。

下來我們接著印出5，然後執行微任務並且印出4.

我們第一個宏任務執行完畢，執行下一個巨集任務，印出1，到此，所有任務都執行完畢。

所以我們最後的結果是2 3 5 4 1。

#

以上是JavaScript中promise和setTimeout執行順序的問題（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！