2026/5/20 11:26:13
网站建设
项目流程
网站备案查询app下载,网站被墙查询,火星建站和八亿建站,wordpress 全站搜索最近在复习 JavaScript 的过程中#xff0c;我遇到稍微复杂一点的执行顺序题#xff0c;就开始靠“感觉”判断。我尝试用一段代码#xff0c;把 JavaScript 的执行顺序一次性讲清楚。
一段代码
async function async1() {console.log(async1)await async2()console.log(as…最近在复习 JavaScript 的过程中我遇到稍微复杂一点的执行顺序题就开始靠“感觉”判断。我尝试用一段代码把 JavaScript 的执行顺序一次性讲清楚。一段代码asyncfunctionasync1(){console.log(async1)awaitasync2()console.log(async1 end)}asyncfunctionasync2(){console.log(async2)}console.log(script start)setTimeout((){console.log(setTimeout)},0)async1()newPromise((resolve){console.log(promise)resolve()}).then((){console.log(promise then)})console.log(script end)//执行顺序script start async1 async2 promise script end async1 end promise then setTimeoutJavaScript 执行顺序的核心规则在分析之前先记住这 4 条规则1️⃣ JavaScript 是单线程的同一时间只做一件事。2️⃣ 同步代码优先执行所有同步代码直接进入调用栈Call Stack。3️⃣ 微任务优先于宏任务每一轮事件循环中先清空所有微任务再执行一个宏任务4️⃣ async / await 的本质是 Promiseawaitfn()等价于Promise.resolve(fn()).then((){// await 后的代码})逐步拆解执行过程① 执行同步代码主线程console.log(script start)输出script start② 注册 setTimeout宏任务setTimeout((){console.log(setTimeout)},0)这里只是注册不会立刻执行。setTimeout 是宏任务Macro TaskJavaScript 的执行环境中有 调用栈 任务队列setTimeout注册的回调会进入 宏任务队列等待当前同步代码和所有微任务执行完0 毫秒只是最短延迟不是立即执行。浏览器有最小时间限制HTML5标准规定至少 4msNode.js 也会将其加入事件循环的下一个 tick所以 setTimeout(fn, 0) 表示“尽快在当前事件循环结束后执行 fn”但绝不是同步立即执行。③ 执行 async1()console.log(async1)输出async1④ 遇到 await async2()console.log(async2)输出async2注意async2()本身是同步执行的await后面的代码被放入微任务队列⑤ Promise 构造函数是同步的console.log(promise)输出promise⚠️ 很多人误以为 Promise “一创建就是异步”这是常见误区。⑥ 继续执行同步代码console.log(script end)输出script end开始清空微任务队列此时微任务队列中有两个任务await后的async1 endpromise.then按进入顺序执行console.log(async1 end)console.log(promise then)输出async1 end promise then最后执行宏任务console.log(setTimeout)输出setTimeout一张执行顺序模型表同步代码 ↓ 微任务全部清空 ↓ 宏任务执行一个 ↓ 微任务再清空 ↓ 下一轮事件循环