JavaScript同步与异步执行顺序解析

在 JavaScript 中,代码执行遵循 同步优先,异步靠后 的原则。具体执行顺序如下:

核心执行规则:

  1. 同步代码:立即在主线程执行(优先处理)

  2. 异步代码

    • 微任务(Microtask) :同步代码执行后立即执行(如 Promise.thenasync/await
    • 宏任务(Macrotask) :微任务执行后才执行(如 setTimeoutsetInterval、DOM 事件)

完整执行流程:

示例代码分析:

javascript 复制代码
console.log("1"); // 同步

setTimeout(() => console.log("2"), 0); // 宏任务

Promise.resolve()
  .then(() => console.log("3")); // 微任务

console.log("4"); // 同步

输出顺序:

复制代码
1 → 4 → 3 → 2

特殊场景说明:

  • async/await 本质await 之前的代码同步执行,await 之后的代码相当于 .then()(微任务)
javascript 复制代码
async function demo() {
  console.log("A"); // 同步
  await Promise.resolve();
  console.log("B"); // 微任务
}

总结执行顺序:

同步代码 → 微任务队列(全部清空)→ 宏任务队列(每次取一个)→ 微任务队列(再次检查)→ ...循环

掌握这一机制能有效解决异步陷阱。

相关推荐
wc887 分钟前
微软EDGE浏览器功能学习
前端·学习·edge
Csvn39 分钟前
🎯 原生 `<dialog>` 元素:终于可以扔掉一半的自定义弹窗组件了?
前端
Csvn41 分钟前
🎨 CSS @layer:用「层叠优先级」终结样式打架的世纪难题
前端
濮水大叔1 小时前
不必把 Vue3 写成“麻花”:从状态碎片到对象协作,重新理解 Zova 的前端心智模型
前端·typescript·vue3·ioc·tsx·zova
Vuji2 小时前
MCP: 一条 tool 调用链路的旅程
前端·人工智能
万少3 小时前
DeepSeek-V4-Flash 正式版上线了,但这 3 个坑我帮你提前踩了
前端·javascript·后端
明月_清风3 小时前
🚀 Palantir Foundry 本体论实战:当 Ontology 从"知识图谱"进化为"企业操作系统"
前端·后端
驳是3 小时前
入坑 Nginx,看这一篇就够了
前端
宁风NF3 小时前
JavaScript:网络请求与前端通信
开发语言·前端·javascript·网络·学习·ecmascript
明月_清风3 小时前
从概念到代码:用 Ontology 构建你的第一个知识图谱
前端·后端