看了《JavaScript高階程式設計》跟《你不知道的JavaScript》後結合這篇文章 leocoder：帶你徹底弄懂Event Loop，基本上弄懂了 Event Loop，這裡做個簡單筆記，方便後續翻閱

巨集佇列

macrotask，也叫tasks。 一些非同步任務的回撥會依次進入macro task queue，等待後續被呼叫，這些非同步任務包括：

• setTimeout
• setInterval
• setImmediate (Node獨有)
• requestAnimationFrame (瀏覽器獨有)
• I/O
• UI rendering (瀏覽器獨有)

微佇列

microtask，也叫jobs。 另一些非同步任務的回撥會依次進入micro task queue，等待後續被呼叫，這些非同步任務包括：

• process.nextTick (Node獨有)
• Promise
• Object.observe
• MutationObserver

佇列列表

• Stack Queue
• Microtask Queue
• Macrotask Queue

佇列執行順序

1. 同步任務

• 同步任務執行過程中如果發現有微任務、巨集任務，將分別丟進相對應的微佇列跟巨集佇列

2. 微任務

• 清空同步佇列後，開始執行微任務，如果在微任務執行過程中發現有微任務或者巨集任務，將分別丟進相對應的佇列中

3. 巨集任務

• 清空微佇列後，開始執行巨集任務，如果在巨集任務執行過程中發現有微任務或者巨集任務，將分別丟進相對應的佇列中

console.log(1);


setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
  
  Promise.resolve().then(() => {
    console.log(6)
  }).then(() => {
    console.log(7)
    
    setTimeout(() => {
      console.log(8)
    }, 0);
  });
})

setTimeout(() => {
  console.log(9);
})

console.log(10);

// 1 4 10 5 6 7 2 3 9 8