來源 |?https://www.cnblogs.com/tangjianqiang/p/13470363.html

我們都知道JavaScript是單線程語言,就是因為單線程的特性，就不得不提js中的同步和異步

一、同步和異步

所謂單線程，無非就是同步隊列和異步隊列，js代碼是自上向下執(zhí)行的，在主線程中立即執(zhí)行的就是同步任務(wù)，比如簡單的邏輯操作及函數(shù)，而異步任務(wù)不會立馬立馬執(zhí)行，會挪步放到到異步隊列中，比如ajax、promise、事件、計時器等等。

也就是先執(zhí)行同步，主線程結(jié)束后再按照異步的順序再次執(zhí)行。

二、時間循環(huán)（Event Loop）

Event Loop是什么？中文翻譯是事件循環(huán)，等待主線程中任務(wù)全部完成后，再回來把異步隊列中任務(wù)放到主程序中運行，這樣反復(fù)的循環(huán)，就是事件循環(huán)。

先來看組代碼

console.log('開始111');setTimeout(function() {   console.log('setTimeout111');}, 0);Promise.resolve().then(function() {   console.log('promise111');}).then(function() {   console.log('promise222');});console.log('開始222');

我們猜想一下上面的代碼，會怎樣打?。课覀冎?，肯定是先走同步的代碼，從上往下，先打印 “開始111”，再打印“開始222”。
中途的三個異步，進入到了異步隊列，等待同步執(zhí)行完（打印完），返回來再執(zhí)行異步，所以是后打印出來。
打印的結(jié)果先放一放，我們稍后回來再說。現(xiàn)在我們中途插播一段知識點：

三、宏觀任務(wù)和微觀任務(wù)（先執(zhí)行微觀任務(wù)，再執(zhí)行宏觀任務(wù)）：

在事件循環(huán)中，每進行一次循環(huán)操作稱為tick，tick 的任務(wù)處理模型是比較復(fù)雜的，里邊有兩個詞：分別是 Macro Task （宏任務(wù)）和 Micro Task（微任務(wù)）。

簡單來說：

宏觀任務(wù)主要包含：setTimeout、setInterval、script(整體代碼)、I/O、UI 交互事件、setImmediate(Node.js?環(huán)境)

微觀任務(wù)主要包括：Promise、MutaionObserver、process.nextTick(Node.js?環(huán)境)

規(guī)范：先執(zhí)行微觀任務(wù)，再執(zhí)行宏觀任務(wù)

那么我們知道了，Promise 屬于微觀任務(wù)， setTimeout、setInterval 屬于宏觀任務(wù)，先執(zhí)行微觀任務(wù)，等微觀任務(wù)執(zhí)行完，再執(zhí)行宏觀任務(wù)。所以我們再看一下這個代碼：

console.log('開始111');
setTimeout(function() {  console.log('setTimeout111');}, 0);
Promise.resolve().then(function() {  console.log('promise111');}).then(function() {  console.log('promise222');});
console.log('開始222');

我們按照步驟來分析下：

1、遇到同步任務(wù)，直接先打印 “開始111”。
2、遇到異步 setTimeout ，先放到隊列中等待執(zhí)行。
3、遇到了 Promise ，放到等待隊列中。
4、遇到同步任務(wù)，直接打印 “開始222”。
5、同步執(zhí)行完，返回執(zhí)行隊列中的代碼，從上往下執(zhí)行，發(fā)現(xiàn)有宏觀任務(wù) setTimeout 和微觀任務(wù) Promise ，那么先執(zhí)行微觀任務(wù)，再執(zhí)行宏觀任務(wù)。

所以打印的順序為：開始111 、開始222 、 promise111 、 promise222 、 setTimeout111 。

同理，我們再來分析一個代碼：

console.log('開始111');
setTimeout(function () {   console.log('timeout111');});
new Promise(resolve => {   console.log('promise111');   resolve();   setTimeout(() => console.log('timeout222'));}).then(function () {   console.log('promise222')})
console.log('開始222');

分析一下：

1、遇到同步代碼，先打印 “開始111” 。
2、遇到setTimeout異步，放入隊列，等待執(zhí)行 。
3、中途遇到Promise函數(shù)，函數(shù)直接執(zhí)行，打印 “promise111”。
4、遇到setTimeout ，屬于異步，放入隊列，等待執(zhí)行。
5、遇到Promise的then等待成功返回，異步，放入隊列。
6、遇到同步，打印 “開始222”。
7、執(zhí)行完，返回，將異步隊列中的代碼，按順序執(zhí)行。有一個微觀任務(wù)，then后的，所以打印 “promise222”，再執(zhí)行兩個宏觀任務(wù) “timeout111” “timeout222”。

所以，打印的順序為：開始111 、 promise111 、 開始222 、 promise222 、 timeout111 、 timeout222 .

先執(zhí)行主任務(wù)，把異步任務(wù)放入循環(huán)隊列當(dāng)中，等待主任務(wù)執(zhí)行完，再執(zhí)行隊列中的異步任務(wù)。異步任務(wù)先執(zhí)行微觀任務(wù)，再執(zhí)行宏觀任務(wù)。一直這樣循環(huán)，反復(fù)執(zhí)行，就是事件循環(huán)機制。