事件循環和Promise之間的關係

Question

我很好奇Event Loop和Promise之間的關係。
該演示揭示了這個問題。我期望p1 fulfilled出現在中間， ，因爲他們排列任務到相同的任務隊列，並逐一執行。

var p1 = new Promise(function(resolve, reject){ 
    resolve(1) 
}) 
setTimeout(function(){ 
    console.log("will be executed at the top of the next Event Loop") 
},0) 
p1.then(function(value){ 
    console.log("p1 fulfilled") 
}) 
setTimeout(function(){ 
    console.log("will be executed at the bottom of the next Event Loop") 
},0) 

控制檯的結果是：

p1 fulfilled 
will be executed at the top of the next Event Loop 
will be executed at the bottom of the next Event Loop 

The visualized effect顯示promise.then的回調沒有去到事件循環的任務隊列。這是正確的？

【注：現在的問題是不一樣的Promise vs setTimeout，因爲它更注重事件循環和承諾之間的關係】

Answer 1

每個事件循環都有一個microtask隊列和一個macrotask隊列。

微任務是最初在微任務隊列中排隊而不是任務隊列的任務。請參閱https://www.w3.org/TR/html51/webappapis.html#microtask-queue。

有兩種microtasks的：

• 孤回調microtasks，如Promise，
• 和化合物microtasks，如Object.observe，MutationObserver和process.nextTick在Node.js的

中的NodeJS

而宏任務隊列主要包含setTimeout，setInterval，setImmediate，​​，I/O。

在事件循環，這兩個任務隊列將分兩步執行：

1. 首先，檢查是否有宏任務（稱之爲X）在老宏任務隊列中;
2. 如果X存在且正在運行，請等待下一步完成;否則，立即進入下一步;
3. 其次，運行microtask隊列的所有microtask;
4. 當運行微任務時，我們仍然可以在隊列中添加更多的微操作，這些任務也將運行。

在您的例子：

1. 首先，你的承諾初始化new Promise和resolve是同步的;
2. 然後將一個setTimeout宏任務同步添加到macrotask隊列;
3. 然後將microtask promise.then(function(){})同步添加到microtask隊列中，這個任務會立即運行，因爲Promise的初始化和解析是同步的，這個任務在任何macrotask之前運行;所以，console.log中的p1 fulfilled;
4. 然後將第二個macrotask setTimeout添加到macrotask隊列;
5. 此事件循環結束後，運行兩個macrotasks;

此代碼：

setTimeout(function(){ 
    console.log("will be executed at the top of the next Event Loop") 
},0) 
var p1 = new Promise(function(resolve, reject){ 
    setTimeout(function(){resolve(1)},0) 
}); 
setTimeout(function(){ 
    console.log("will be executed at the bottom of the next Event Loop") 
},0) 
for (var i = 0; i < 100; i++) { 
    (function(j){ 
     p1.then(function(value){ 
      console.log("promise then - " + j) 
     }); 
    })(i) 
} 

輸出順序：

will be executed at the top of the next Event Loop 
promise then - 0 
promise then - 1 
promise then - 2 
... 
promise then - 99 
will be executed at the bottom of the next Event Loop 

1. 首先添加三個宏任務setTimeout到宏任務隊列，以及一個microtask promise.then()到microtask隊列;
2. 運行macrotask;
3. 如果條件true運行所有microtasks，但它是false，所以請轉到下一步;
4. 運行第二個macrotask;
5. 檢查承諾是否解決，條件是否成立，然後運行所有的microtasks;
6. 繼續運行其他macrotasks;

Answer 2

承諾將不會被調用，除非堆棧明確的應用程序代碼按照博士Axel Rauschmayer here。

...... Promises/A +規範要求 後者的執行方式總是被使用。它通過以下 requirement（2.2.4）爲當時（）方法指出這樣：

onFulfilled或onRejected不能調用，直到執行 上下文堆棧僅包含平臺的代碼。

必須注意的是非常重要的：

這意味着，你的代碼可以依靠運行至完成語義（如 在第1部分解釋）和鏈接承諾不會餓死其他 任務的處理時間。