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

总结执行顺序:

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

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

相关推荐
爱喝水的小周11 分钟前
AJAX vs axios vs fetch
前端·javascript·ajax
Jinxiansen021114 分钟前
unplugin-vue-components 最佳实践手册
前端·javascript·vue.js
几道之旅18 分钟前
介绍electron
前端·javascript·electron
周胡杰20 分钟前
鸿蒙arkts使用关系型数据库,使用DB Browser for SQLite连接和查看数据库数据?使用TaskPool进行频繁数据库操作
前端·数据库·华为·harmonyos·鸿蒙·鸿蒙系统
315356691321 分钟前
ClipReader:一个剪贴板英语单词阅读器
前端·后端
玲小珑23 分钟前
Next.js 教程系列(十一)数据缓存策略与 Next.js 运行时
前端·next.js
qiyue7738 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
断竿散人42 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD44 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟1 小时前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计