JS事件循环之“宏任务与微任务“

在JavaScript中，事件循环被划分为宏任务（macrotask）和微任务（microtask）。宏任务通常与消息队列中的事件相关，而微任务通常与Promise相关。

宏任务包括：

• 执行全局代码
• 处理事件监听器
• 处理XHR响应
• 处理定时器（包括setTimeout和setInterval）

微任务包括：

• Promise的then/catch/finally方法中的回调函数
• MutationObserver的回调函数
• process.nextTick（Node.js中特有）

在事件循环中，JavaScript引擎会先执行所有微任务，然后再执行一个宏任务。这个过程会重复进行，直到所有任务都被执行完毕。

以下是一个示例代码，演示了宏任务和微任务的执行顺序：

console.log('script start');
 
setTimeout(function() {
  console.log('setTimeout');
}, 0);
 
Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});
 
console.log('script end');
 
// 输出顺序为:
// script start
// script end
// promise1
// promise2
// setTimeout

在这个例子中，setTimeout是一个宏任务，而两次调用then方法添加的函数是微任务。因此，当JavaScript引擎执行到Promise.resolve()时，它会将其then方法中的回调函数推入微任务队列。接着继续执行同步代码直到结束，然后处理微任务队列中的所有任务，最后才处理下一个宏任务，即setTimeout中的回调函数。