今天做了一道筆試題覺得很有意義分享給大家，題目如下：

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!

參考文章：www.cnblogs.com/tugenhua070…

還有阮老師的promise介紹：es6.ruanyifeng.com/?search=pro…

文章本人原創，轉載請評論；

前端菜鳥對JavaScript的理解還有很多不足，如有錯誤歡迎大家指出來；

喜歡的點個贊把！

總結

以上是生活随笔為你收集整理的笔试题——JavaScript事件循环机制（event loop、macrotask、microtask）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。