詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的執行順序

2019-11-19 12:29:36

字體：大中小

來源：轉載

供稿：網友

本文介紹了詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的執行順序，分享給大家，具體如下：

先舉一個比較典型的例子：

setImmediate(function(){  console.log(1);},0);setTimeout(function(){  console.log(2);},0);new Promise(function(resolve){  console.log(3);  resolve();  console.log(4);}).then(function(){  console.log(5);});console.log(6);process.nextTick(function(){  console.log(7);});console.log(8);

這段代碼輸出的正確順序是什么？

答案是：

3 4 6 8 7 5 2 1

在解釋輸出結果之前，我們來看幾個概念：

macro-task: script (整體代碼)，setTimeout, setInterval, setImmediate, I/O, UI rendering.

micro-task: process.nextTick, Promise(原生)，Object.observe，MutationObserver

第一步. script整體代碼被執行，執行過程為

創建setImmediate macro-task
創建setTimeout macro-task
創建micro-task Promise.then 的回調，并執行script console.log(3); resolve(); console.log(4); 此時輸出3和4，雖然resolve調用了，執行了但是整體代碼還沒執行完，無法進入Promise.then 流程。
console.log(6)輸出6
process.nextTick 創建micro-task
console.log(8) 輸出8
第一個過程過后，已經輸出了3 4 6 8

第二步. 由于其他micro-task 的優先級高于macro-task。

此時micro-task 中有兩個任務按照優先級process.nextTick 高于 Promise。

所以先輸出7，再輸出5

第三步，micro-task 任務列表已經執行完畢，家下來執行macro-task. 由于setTimeout的優先級高于setIImmediate，所以先輸出2，再輸出1。

整個過程描述起來像是同步操作，實際上是基于Event Loop的事件循環

關于micro-task和macro-task的執行順序，可看下面這個例子(來自《深入淺出Node.js》)：

//加入兩個nextTick的回調函數process.nextTick(function () {  console.log('nextTick延遲執行1');});process.nextTick(function () {   console.log('nextTick延遲執行2');});// 加入兩個setImmediate()的回調函數setImmediate(function () {  console.log('setImmediate延遲執行1');   // 進入下次循環   process.nextTick(function () {    console.log('強勢插入');  });});setImmediate(function () {  console.log('setImmediate延遲執行2'); });console.log('正常執行');

運行這段代碼,結果是這樣：