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

总结执行顺序:

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

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

相关推荐
yu俞娥宝24 分钟前
Codex官网前端可抄吗?技术拆解、风险边界与合规借鉴方案
前端
捧 花1 小时前
FastAPI 基础语法:从一个完整接口理解 Web API 的设计
前端·python·fastapi·middleware
Hilaku1 小时前
一行 CSS 新特性干掉 20 行 JavaScript ?
前端·javascript·程序员
JarvanMo1 小时前
AI 写代码暴增 161 倍,移动开发有没有变得更差?
前端
梦曦i1 小时前
RouterLink v2.5.0:H5端原生能力全面回归
前端·uni-app
小林ixn1 小时前
React + Zustand + JWT:从零实现登录鉴权与请求拦截
前端·react.js·前端框架
葡萄城技术团队2 小时前
下拉多选类型单元格:在 SpreadJS 里接入 xm\-select
前端
粥里有勺糖2 小时前
视野修炼-技术周刊第130期 | 光影效果
前端·javascript·github
小岛前端2 小时前
AI Skills 已经封神,但新的问题却越来越严重!
前端·后端·github
拖孩2 小时前
一个人 + AI 做的小程序,上线 15 天赚了 10 块 5
前端·后端·微信小程序