筆試題——JavaScript事件迴圈機制（event loop、macrotask、microtask）
今天做了一道筆試題覺得很有意義分享給大家，題目如下：
setTimeout(()=>{
console.log('A');
},0);
var obj={
func:function () {
setTimeout(function () {
console.log('B')
},0);
return new Promise(function (resolve) {
console.log('C');
resolve();
})
}
};
obj.func().then(function () {
console.log('D')
});
console.log('E');複製程式碼
JavaScript 都知道它是一門單執行緒的語言，這也就意味著 JS 無法進行多執行緒程式設計，但是 JS 當中卻有著無處不在的 非同步 概念 。要完全理解非同步，就需要了解 JS 的執行核心—— 事件迴圈（event loop）。
一、什麼是事件佇列？
首先來看一個小小的demo
console.log('start');
setTimeout(()=>{
console.log('A');
},1000);
console.log('end');
//start
//end
//A複製程式碼
js執行之後，程式輸出 'start' 和 'end'，在大約1s之後輸出了 'A' 。那我們就有疑問了？為什麼A不在end之前執行呢？
這是因為 setTimeout 是一個非同步的函式。意思也就是說當我們設定一個延遲函式的時候，當前指令碼並不會阻塞，它只是會在瀏覽器的事件表中進行記錄，程式會繼續向下執行。當延遲的時間結束之後，事件表會將回調函式新增至 事件佇列（task queue） 中，事件佇列拿到了任務過後便將任務壓入 執行棧（stack） 當中，執行棧執行任務，輸出 'A'。
事件佇列 是一個儲存著待執行任務的佇列，其中的任務嚴格按照 時間先後順序 執行，排在隊頭的任務將會率先執行，而排在隊尾的任務會最後執行。事件佇列每次僅執行一個任務，在該任務執行完畢之後，再執行下一個任務。執行棧則是一個類似於函式呼叫棧的執行容器，當執行棧為空時，JS 引擎便檢查事件佇列，如果不為空的話，事件佇列便將第一個任務壓入執行棧中執行。
那麼我將這個例子做一個小小的改動看一看：
console.log('start');
setTimeout(()=>{
console.log('A');
},0);
console.log('end');
//start
//end
//A複製程式碼
可以看出，我們將settimeout第二個引數設定為0後，'A' 也總是會在 'end' 之後輸出。所以究竟發生了什麼？這是因為 setTimeout 的回撥函式只是會被新增至 事件佇列 ，而不是立即執行。由於當前的任務沒有執行結束，所以 setTimeout 任務不會執行，直到輸出了 'end' 之後，當前任務執行完畢，執行棧為空，這時事件佇列才會把 setTimeout 回撥函式壓入執行棧執行。
二、Promise的含義和基本用法？
所謂 Promise ，簡單說就是一個容器，裡面儲存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語法上說，Promise 是一個物件，從它可以獲取非同步操作的訊息。Promise 提供統一的 API，各種非同步操作都可以用同樣的方法進行處理。
寫一個小demo看一下Promise的執行機制：
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved複製程式碼
上面程式碼中，Promise 新建後 立即執行 ，所以首先輸出的是 Promise 。然後， then 方法指定的回撥函式，將在當前指令碼 所有同步任務執行完才會執行 ，所以 resolved 最後輸出。
三、 Macrotasks和Microtasks
Macrotasks和Microtasks 都屬於上述的非同步任務中的一種，他們分別有如下API：
macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks: process.nextTick, Promise, MutationObserver
setTimeout的macrotask， 和 Promise的microtask 有哪些不同，先來看下程式碼如下：
console.log(1);
setTimeout(function(){
console.log(2);
}, 0);
Promise.resolve().then(function(){
console.log(3);
}).then(function(){
console.log(4);
});
//1
//3
//4
//2複製程式碼
如上程式碼可以看到， Promise 的函式程式碼的非同步任務會 優先 於 setTimeout 的延時為0的任務先執行。
原因是任務佇列分為 macrotasks 和 microtasks, 而promise中的then方法的函式會被推入到microtasks佇列中，而setTimeout函式會被推入到macrotasks
任務佇列中，在每一次事件迴圈中， macrotask 只會 提取一個執行 ，而 microtask 會 一直 提取，直到microsoft佇列 為空 為止。
也就是說如果某個microtask任務被推入到執行中，那麼當主執行緒任務執行完成後，會迴圈呼叫該佇列任務中的下一個任務來執行，直到該任務佇列到最後一個任務為止。
而事件迴圈每次只會入棧一個macrotask, 主執行緒 執行完成該任務後又會檢查 microtasks 佇列並完成裡面的所有任務後再執行 macrotask 的任務。
四、分析本題目
setTimeout(()=>{
console.log('A');
},0);
var obj={
func:function () {
setTimeout(function () {
console.log('B')
},0);
return new Promise(function (resolve) {
console.log('C');
resolve();
})
}
};
obj.func().then(function () {
console.log('D')
});
console.log('E');複製程式碼
1、首先 setTimeout A 被加入到 事件佇列 中 ==> 此時 macrotasks 中有[‘A’]；
2、obj.func()執行時，setTimeout B 被加入到 事件佇列 中 ==> 此時 macrotasks 中有[‘A’，‘B’]；
3、接著return一個Promise物件，Promise 新建後 立即執行 執行console.log('C'); 控制檯 首次 列印‘C’;
4、然後， then 方法指定的回撥函式，被加入到 microtasks 佇列，將在當前指令碼所有同步任務執行完才會執行。 ==> 此時 microtasks 中有[‘D’]；
5、然後繼續執行當前指令碼的同步任務，故控制檯第 二次 輸出‘E’；
6、此時所有同步任務執行完畢，如上所述先檢查 microtasks 佇列 ， 完成其中所有任務，故控制檯第 三次 輸出‘D’；
7、最後再執行 macrotask 的任務，並且按照入佇列的時間順序，控制檯第 四次 輸出‘A’，控制檯第 五次 輸出‘B’。
五、執行js程式碼
分析與實際符合，NICE!
參考文章： ofollow,noindex">www.cnblogs.com/tugenhua070…
還有阮老師的promise介紹： es6.ruanyifeng.com/?search=pro…
文章本人原創，轉載請評論；
前端菜鳥對JavaScript的理解還有很多不足，如有錯誤歡迎大家指出來；
喜歡的點個贊把！