Event Loop 事件循环

看了《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