??一起談一談js中的宏任務和微任務！

前面面試的文章中我們說過一道關于宏任務和微任務的題：

setTimeout(function(){
	 console.log('1')
});
 
new Promise(function(resolve){
	 console.log('2');
     resolve();
}).then(function(){
	console.log('3')
});
 
console.log('4')

試問一下上面代碼的執行順序是啥？

有小伙伴可能會答：2，4，1，3

估摸著是這么想的：我難道不知道js是一行一行執行的，setTimeout是異步，所以先放后面；往下走，執行了console.log(2),.then()是異步的，放在后面；走了console.log(4);再去異步佇列里走，先是console.log(1);再是console.log(3)，

But，事實真是如此嗎？我有點慌，于是我粘貼到瀏覽器去瞅兩眼：

我擦嘞，居然是2，4，3，1！我簡直不敢相信！

帶著困惑的我，只能去好好研究研究JavaScript的運行機制了！

1、關于JavaScript

JavaScript是一門單執行緒語言，即一次只能完成一個任務，若有多個任務要執行，則必須排隊按照佇列來執行(前一個任務完成,再執行下一個任務)，

2、JavaScript事件回圈

既然js是單執行緒，那就像只有一個視窗的食堂，學生需要排隊一個一個打飯，同理js任務也要一個一個順序執行，這種模式執行簡單，但隨著日后的需求，事務，請求增多，這種單執行緒模式執行效率必定低下，只要有一個任務執行消耗了很長時間，在這個時間里后面的任務無法執行，

常見的有新聞包含的超清圖片加載很慢，難道我們的網頁要一直卡著直到圖片完全顯示出來？為了解決這個問題，JavaScript語言將任務執行模式分成同步和異步：

同步模式：就是上面所說的一種執行模式，后一個任務等待前一個任務結束，然后再執行，程式的執行順序與任務的排列順序是一致的、同步的，

異步模式：就是每一個任務有一個或多個回呼函式（callback），前一個任務結束后，不是執行后一個任務，而是執行回呼函式，后一個任務則是不等前一個任務結束就執行，所以程式的執行順序與任務的排列順序是不一致的、異步的，

導圖要表達的內容用文字來表述的話：

• 同步和異步任務分別進入不同的執行"場所"，同步的進入主執行緒，異步的進入Event Table并注冊函式，
• 當指定的事情完成時，Event Table會將這個函式移入Event Queue，
• 主執行緒內的任務執行完畢為空，會去Event Queue讀取對應的函式，進入主執行緒執行，
• 上述程序會不斷重復，也就是常說的Event Loop(事件回圈)，

再配上代碼表達：

let data = [];
$.ajax({
    url:blog.csdn.net,
    data:data,
    success:() => {
        console.log('發送成功!');
    }
})
console.log('代碼執行結束');

上面是一段簡易的ajax請求代碼：

• ajax進入Event Table，注冊回呼函式success，
• 執行console.log('代碼執行結束')，
• ajax事件完成，回呼函式success進入Event Queue，
• 主執行緒從Event Queue讀取回呼函式success并執行，

相信通過上面的文字和代碼，你已經對js的執行順序有了初步了解，然而這也是為什么會有小伙伴回答2，4，1，3的原因，

然而實際上，異步佇列里是還有門道的，我們那道面試題，setTimeout和promise的.then()都在異步佇列了！接下來，講講那些門道(宏任務和微任務)，

3、宏任務和微任務

每個人的理解方式不同，因為宏任務和微任務并不是標準，但執行的順序在js中是大一統了的，

宏任務

微任務

宏任務包括：<script>整體代碼、setTimeout、setInterval、setImmediate、Ajax、DOM事件
微任務：process.nextTick、MutationObserver、Promise.then catch finally

process.nextTick差異太大，不同的node執行不統一，不做標準
**微任務比宏任務的執行時間要早**

Tip:有些人喜歡將<script>整體代碼放在宏任務里，但我個人不喜歡，在我這里它只是第一執行的主執行緒，我個人是將宏任務和微任務都歸類到異步任務里！

我們再來看看那道面試題：

//回呼才是異步任務
setTimeout(function(){//宏任務
	 console.log('1')
});
 
new Promise(function(resolve){
	 console.log('2');//同步主執行緒
     resolve();
}).then(function(){//微任務
	console.log('3')
});
 
console.log('4')//同步主執行緒

2：同步中的第一個，故第一

4：同步中的第二個，故第二

3：異步中的微任務，故第三

1：異步中的宏任務，故第二

因此：2，4，3，1的結果就出來了！

除此我們來拓展一下：

setTimeout(() => {//宏任務佇列1
  console.log('1');//宏任務隊1的任務1

  setTimeout(() => {//宏任務佇列3(宏任務佇列1中的宏任務)
    console.log('2')
  }, 0)

  new Promise(resolve => {
    resolve()
    console.log('3')//宏任務佇列1的任務2
  }).then(() => {//宏任務佇列1中的微任務
    console.log('4')
  })

}, 0)
 
setTimeout(() => {//宏任務佇列2
  console.log('5')
}, 0)

console.log('6')//同步主執行緒

執行整體代碼（宏任務）console.log('6') >> 宏任務佇列1、宏任務佇列2位異步（依次執行）

宏任務佇列1：=>

console.log('1')

console.log('3')

console.log('4')//宏任務中的微任務

剩下的不會先執行，因為是宏任務中的宏任務（console.log(2)) ，要被繼續丟進任務佇列后

宏任務佇列2：=>

console.log('5')

宏任務佇列1中的宏任務3：=>

console.log('2')

以上代碼會怎么輸出呢？

4、拓展宏任務微任務

上面出了復雜的題，小伙伴們不妨可以想一想，這種復雜情況，一個套一個的該怎么執行呢？

整體代碼：

• 6：第一個同步主執行緒，故第一

script整體代碼里沒有微任務故直接執行宏任務=>

宏任務佇列：

• 宏任務佇列1

任務1：console.log(1)

任務2：console.log(3)

宏任務佇列1中的微任務：console.log(4)

宏任務佇列3：因他是宏任務佇列1中的宏任務，所以被丟進了任務佇列最后，我們先看宏任務佇列1同級的是否還有宏任務，有就先執行同級的，沒有才可以執行宏任務佇列3！故最后！

• 宏任務佇列2

console.log(5)

所以輸出的結果是什么？是6，1，3，4，5，2！

經過驗證，結果正確！

5、總結

實際上你只需要知道拓展之前的，畢竟拓展后的確實比較復雜，需要一定的理解能力，他可以三層，可以四層等....我不信你會跟這題目一樣寫代碼，這不是憨批是什么😆，

對于宏任務和微任務請記住這幾點：

• 微任務比宏任務執行要早，
• 宏任務里如果有宏任務，不會執行里面的那個宏任務，而是被丟進任務佇列后面，所以會最后執行，

此上就是我給大家的分享，如果有用，還望各位來個三連支持一下喲～～～感謝🙏 各位了，

最后出個題：

console.log('1');

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

setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

這題里有process.nextTick，請在nodejs中驗證哦～