堆栈情况不同，微任务执行顺序也大不相同

在 Javascript 中，微任务的执行顺序通常遵循先入先出（FIFO） 的原则。也就是说，最早进入微任务队列的微任务将首先执行。但是，在某些情况下，微任务的执行顺序可能会受到 Javascript 堆栈的影响。

为了更好地理解这一点，让我们来看两个示例。

示例 1：

console.log('script start');

Promise.resolve().then(() => {
  console.log('promise1');
});

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise2');
});

console.log('script end');

在这个示例中，我们创建了两个 Promise 对象和一个 setTimeout 函数。然后，我们使用 console.log() 函数在脚本开始和结束时打印一条消息。

当我们运行这个脚本时，我们会看到以下输出：

script start
promise1
script end
promise2
setTimeout

如您所见，微任务的执行顺序遵循了 FIFO 原则。promise1 微任务在 promise2 微任务之前执行，而 setTimeout 微任务在所有微任务之后执行。

示例 2：

console.log('script start');

Promise.resolve().then(() => {
  console.log('promise1');

  setTimeout(() => {
    console.log('setTimeout');
  }, 0);
});

Promise.resolve().then(() => {
  console.log('promise2');
});

console.log('script end');

在这个示例中，我们在 promise1 微任务中添加了一个 setTimeout 函数。

当我们运行这个脚本时，我们会看到以下输出：

script start
promise1
setTimeout
promise2
script end

如您所见，微任务的执行顺序不再遵循 FIFO 原则。setTimeout 微任务在 promise2 微任务之前执行。

这是因为 setTimeout 函数被添加到 Javascript 堆栈中。当 Javascript 引擎执行 promise1 微任务时，它遇到了 setTimeout 函数。Javascript 引擎会将 setTimeout 函数从微任务队列中取出，并将其添加到 Javascript 堆栈中。然后，Javascript 引擎继续执行 promise1 微任务。

当 Javascript 引擎执行完 promise1 微任务后，它会从 Javascript 堆栈中取出 setTimeout 函数并执行它。然后，Javascript 引擎继续执行 promise2 微任务。

总结

从这两个示例中，我们可以看到微任务的执行顺序可能会受到 Javascript 堆栈的影响。如果微任务中包含一个 Javascript 堆栈函数（如 setTimeout 函数），那么该微任务可能会在其他微任务之前执行。

结论

微任务的执行顺序并不是固定的。微任务的执行顺序会因 JavaScript 堆栈的情况而有所不同。因此，在编写 Javascript 代码时，您应该注意微任务的执行顺序，并避免在微任务中使用 Javascript 堆栈函数。