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"); // 微任务
}

总结执行顺序:

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

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

相关推荐
kyriewen3 小时前
微软用Go重写TypeScript编译器,速度提升10倍,网友:这是“背叛”还是“救赎”?
前端·typescript·ecmascript 6
Ceelog3 小时前
久坐党自救指南:屏幕前 8 小时,身体到底在经历什么
前端·后端
西陵3 小时前
Agent 为什么会陷入 Doom Loop?OpenClaw 的破解之道
前端·人工智能·ai编程
Hyyy4 小时前
普通前端续命周报——第2周
前端
wuxinyan1234 小时前
工业级大模型学习之路030:Streamlit 企业级智能体前端工作台
前端·学习·streamlit·智能体
修己xj4 小时前
告别无效刷屏!TrendRadar:最快30秒部署的开源热点助手,让你只看真正关心的新闻
前端
anOnion5 小时前
构建无障碍组件之Slider Pattern
前端·html·交互设计
云水一下5 小时前
JavaScript 从零基础到精通系列:前世今生与编程启蒙
前端·javascript
月亮邮递员6165 小时前
Markdown语法总结
开发语言·前端·javascript
Kurisu5756 小时前
雾锁王国修改器下载2026最新
前端·修改器代码