promise和setTimeout執行順序的問題

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
---------------------
做者：LeonWuV
來源：CSDN
原文：https://blog.csdn.net/wxl1555/article/details/80054538
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

 

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，到此，全部任務都執行完畢。