深入理解JavaScript中的宏任务和微任务机制

概述

在JavaScript中，任务的执行分为两种：宏任务和微任务。宏任务和微任务是异步任务的一种处理方式，可以帮助我们合理地安排任务的执行顺序，避免出现项目中遇到的异步问题。

宏任务

宏任务是由浏览器内置的任务处理机制进行处理的，包括：加载事件（如load）、鼠标事件、输入事件、定时器事件等。当浏览器执行完当前宏任务后，才会去检查是否有待处理的微任务，如果有，就把所有的微任务全部执行。

微任务

微任务相对于宏任务而言，处理方式更加灵活，它们通过Promise进行管理。当Promise的状态变为resolved或rejected时，就会触发微任务。在当前任务执行结束后，会立即执行所有微任务，而不需要等待下一个宏任务执行。

如果在执行微任务时，又产生了新的微任务，会继续将其加入到微任务队列中，直到队列被清空。

示例说明

示例1

console.log("start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");
}).then(function() {
  console.log("promise2");
});

console.log("end");

由于setTimeout是宏任务，Promise.resolve().then是微任务，程序的执行顺序如下：

start
end
promise1
promise2
setTimeout

示例2

console.log("start");

setTimeout(function() {
  console.log("setTimeout");
}, 0);

Promise.resolve().then(function() {
  console.log("promise1");

  Promise.resolve().then(function() {
    console.log("promise1.1");
  }).then(function() {
    console.log("promise1.2");
  });
}).then(function() {
  console.log("promise2");
});

console.log("end");

同样，setTimeout是宏任务，Promise.resolve().then是微任务，由此产生的嵌套Promise同样是微任务。程序执行顺序如下：

start
end
promise1
promise1.1
promise1.2
promise2
setTimeout

从上述两个示例可以看出，微任务的执行顺序是在同一个宏任务中先执行所有微任务，再执行宏任务。在宏任务执行时，如果产生了新的微任务，则会加入到微任务队列中，等待下一次宏任务执行。