javascript中事件循環的執行順序是什么

這篇文章主要介紹javascript中事件循環的執行順序是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

                                                       本篇文章給大家帶來的內容是關于javascript中事件循環（Event Loop）的執行順序，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

簡要介紹：談談promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop隊列中的執行順序

問題的來源

event loop都不陌生，是指主線程從“任務隊列”中循環讀取任務，比如

例1：

setTimeout(function(){console.log(1)},0);

console.log(2)

//輸出2,1

在上述的例子中，我們明白首先執行主線程中的同步任務，當主線程任務執行完畢后，再從event loop中讀取任務，因此先輸出2，再輸出1。

event loop讀取任務的先后順序，取決于任務隊列（Job queue）中對于不同任務讀取規則的限定。比如下面一個例子：

例2：

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});
console.log(1);
//輸出為  1  2 3

先輸出1，沒有問題，因為是同步任務在主線程中優先執行，這里的問題是setTimeout和Promise.then任務的執行優先級是如何定義的。

執行順序

在Job queue中的隊列分為兩種類型：macro-task和microTask。我們舉例來看執行順序的規定，我們設

macro-task隊列包含任務: a1, a2 , a3
micro-task隊列包含任務: b1, b2 , b3

執行順序為，首先執行marco-task隊列開頭的任務，也就是 a1 （a1代表同步的主任務）任務，執行完畢后，在執行micro-task隊列里的所有任務，也就是依次執行b1, b2 , b3(異步)，執行完后清空micro-task中的任務，接著執行marco-task中的第二個任務（異步），依次循環。

了解完了macro-task和micro-task兩種隊列的執行順序之后，我們接著來看，真實場景下這兩種類型的隊列里真正包含的任務（我們以node V8引擎為例），在node V8中，這兩種類型的真實任務順序如下所示：

macro-task隊列真實包含任務：

script(主程序代碼)[對應上方的a1],setTimeout, setInterval, setImmediate, I/O, UI rendering

micro-task隊列真實包含任務：

process.nextTick, Promises, Object.observe, MutationObserver

由此我們得到的執行順序應該為：

script(主程序代碼)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering

在ES6中macro-task隊列又稱為ScriptJobs，而micro-task又稱PromiseJobs

舉例

(1) setTimeout和promise

例3:

setTimeout(function () {
  console.log(3);
}, 0);

Promise.resolve().then(function () {
  console.log(2);
});

console.log(1);

(2) process.nextTick和promise、setTimeout

例子4：
setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);
//輸出2,6,5,3,4,1

(3)更復雜的例子

setTimeout(function(){console.log(1)},0);

new Promise(function(resolve,reject){
   console.log(2);
   setTimeout(function(){resolve()},0)
}).then(function(){console.log(3)
}).then(function(){console.log(4)});

process.nextTick(function(){console.log(5)});

console.log(6);

//輸出的是  2 6 5 1 3 4

這些例子的原因請根據執行順序執行判斷，這里不一一解釋了

以上是“javascript中事件循環的執行順序是什么”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！