JavaScript事件循环机制是什么，如何影响异步执行顺序？

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《JavaScript事件循环机制是什么，如何影响异步执行顺序？》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

事件循环先执行同步代码，再清空微任务队列，最后执行宏任务；因此setTimeout（宏任务）总在Promise.then（微任务）之后执行。

JavaScript 事件循环怎么决定 setTimeout 和 Promise.then 谁先执行？

事件循环不是“先到先执行”的队列，而是分层调度：宏任务（macro-task）和微任务（micro-task）各自排队，且每次宏任务执行完后，**必须清空当前所有微任务队列**，再取下一个宏任务。

典型宏任务包括：setTimeout、setInterval、I/O、UI 渲染；典型微任务包括：Promise.then/catch/finally、MutationObserver、queueMicrotask。

这意味着哪怕 setTimeout(fn, 0) 看似“立刻”，它也得等当前同步代码 + 所有已入队微任务执行完才轮到。

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出：1 → 4 → 3 → 2

为什么 async/await 会改变异步流程的“断点”位置？

await 不是阻塞，而是语法糖，底层仍靠 Promise 和微任务实现。每次 await 后的表达式求值完成后，后续代码会被包装进一个新的微任务中。

这导致 await 后的语句不会紧接在上一个同步语句之后执行，而要等本轮微任务清空后才进队——容易误判执行时序。

• 同一函数内多个 await，它们之间是微任务链，不是同步连续
• await Promise.resolve() 等价于 Promise.resolve().then(...)，不产生新宏任务
• 如果 await 的是普通值（如 await 42），会立即转为 Promise.resolve(42)，仍走微任务

async function f() {
  console.log('a');
  await console.log('b'); // 'b' 是同步执行的，但 await 后的 'c' 是微任务
  console.log('c');
}
f();
console.log('d');
// 输出：a → b → d → c

Node.js 和浏览器的事件循环阶段有啥关键差异？

浏览器事件循环规范（HTML Standard）定义了 6 个阶段；Node.js（libuv）则明确划分 6 个阶段，其中 timers、pending callbacks、idle/prepare、poll、check、close callbacks，且每个阶段结束后都会检查并执行微任务。

关键区别在于：setImmediate（Node.js 特有）属于 check 阶段，在 poll 阶段空闲后立即触发；而 setTimeout(fn, 0) 属于 timers 阶段，可能被系统延迟干扰；两者谁先执行不绝对，取决于进入 poll 阶段时是否有 I/O 事件待处理。

• 在空 poll 阶段，setImmediate 总在下一轮循环的 check 阶段执行，setTimeout 可能被提前或延后
• 浏览器没有 setImmediate，也不暴露阶段控制，只保证宏/微任务分离
• process.nextTick（Node.js）比所有微任务更早执行，甚至在 Promise.then 前，但它不属于标准事件循环，是 Node.js 特殊钩子

哪些操作看似同步、实则触发微任务，容易引发意外交互？

有些 API 表面无异步痕迹，但内部依赖 Promise 或调度机制，实际把回调推入微任务队列，导致执行时机晚于预期。

• queueMicrotask(callback)：显式插入微任务，比 Promise.then 更轻量，无 Promise 构造开销
• Observable（RxJS）默认使用 Promise.then 调度，observeOn(asyncScheduler) 才切到宏任务
• Vue 3 的 nextTick 在浏览器中优先用 Promise.then，降级用 queueMicrotask 或 setTimeout
• React 的 useEffect 回调在渲染提交后以微任务方式调度（v18+ concurrent 模式下可能被中断或延迟）

真正难调试的，往往是那些没写 async、没见 then，却因框架封装悄悄进了微任务的代码——它们打断了你对“同步执行流”的直觉判断。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript事件循环机制是什么，如何影响异步执行顺序？》文章吧，也可关注golang学习网公众号了解相关技术文章。