首先发生什么: setTimeout 0还是等待Promise.resolve？

在JavaScript中，setTimeout和Promise.resolve的执行顺序涉及到事件循环（Event Loop）的机制。为了更好地理解这个问题，我们需要先了解一些基础概念。

基础概念

1. 事件循环（Event Loop）：
   • JavaScript是单线程的，但它通过事件循环机制来处理异步操作。
   • 事件循环负责处理任务队列（Task Queue）和微任务队列（Microtask Queue）中的任务。

• 宏任务（MacroTask）和微任务（MicroTask）：
  • 宏任务包括：setTimeout、setInterval、I/O、UI渲染等。
  • 微任务包括：Promise.then、process.nextTick（Node.js）、MutationObserver等。

执行顺序

根据事件循环的机制，微任务会在当前宏任务执行完毕后立即执行，而宏任务则会在下一个事件循环周期开始时执行。

示例代码

console.log('Script start');

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

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

console.log('Script end');

输出顺序

1. Script start
2. Script end
3. Promise.resolve
4. setTimeout

解释

1. Script start 和 Script end：
   • 这两个日志会在脚本开始执行时立即输出。

• Promise.resolve：
  • Promise.resolve会立即执行，并将其回调函数放入微任务队列。
  • 当前宏任务（脚本执行）完成后，事件循环会立即处理微任务队列中的任务，因此Promise.resolve的回调函数会在Script end之后立即执行。
• setTimeout：
  • setTimeout会将回调函数放入宏任务队列，但不会立即执行。
  • 当前宏任务和所有微任务处理完毕后，事件循环才会处理宏任务队列中的任务，因此setTimeout的回调函数会在所有微任务之后执行。

结论

在JavaScript中，Promise.resolve的回调函数会在当前宏任务完成后立即执行，而setTimeout的回调函数会在下一个事件循环周期开始时执行。因此，Promise.resolve会先于setTimeout执行。

参考链接

• MDN Web Docs: Event Loop
• MDN Web Docs: Promise