js基礎進階–promise和setTimeout執行順序的問題

LeonWuV發表於2019-02-16
JSPromise

歡迎訪問我的個人部落格：http://www.xiaolongwu.cn

前言

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。

結束

github資源地址：js基礎進階–promise和setTimeout執行順序的問題

csdn部落格地址：https://blog.csdn.net/wxl1555

如果您對我的部落格內容有疑惑或質疑的地方，請在下方評論區留言，或郵件給我，共同學習進步。

郵箱：wuxiaolong802@163.com

相關文章