← 返回目录

13. JS 异步执行顺序

JS 是单线程：就像一个人干活，一次只能干一件事。规则就三条：① 同步代码从上到下先干完；② 定时器是异步，排队等着；③ 就算延迟写 0，也要等同步干完才轮到它。

13.1 互动演示（预测 → 运行对比）

13.2 知识点讲解

① 三道核心规则（先背熟）

// 1. JS 一个人干活，一次只能干一件事：同步代码从上往下先干完
// 2. 定时器这种异步活：得等同步全干完了才轮到
// 3. 就算你把延迟写成 0，它也不会立刻跑，照样得排队等同步走完

② 经典顺序题①（必考）：A C E B D

console.log('A'); // 同步代码，立刻喊 A，第一个出来
setTimeout( => console.log('B'), 0); // 异步闹钟，定 0 毫秒，先去排队
console.log('C'); // 同步代码，接着喊 C
setTimeout( => console.log('D'), 100); // 异步闹钟，定 100 毫秒，排在 B 后面
console.log('E'); // 同步代码，再喊 E

// 实际喊出来的顺序：A → C → E → B → D
// 一步一步看：
// ① 同步的 A、C、E 一口气全喊完
// ② 同步干完了，轮到排队的异步：B（0 毫秒）先响
// ③ D（100 毫秒）最后才响

看顺序先找同步代码，它们"插队"在前；异步里再按"延迟时间短的先执行"排队。

③ 经典顺序题②：1 4 2 3

console.log(1); // 同步代码，立刻喊 1，第一个出来
setTimeout( => { console.log(2); }, 0); // 异步闹钟，先写的那个，排 1 号
setTimeout( => { console.log(3); }, 0); // 异步闹钟，后写的那个，排 2 号
console.log(4); // 同步代码，接着喊 4

// 实际喊出来的顺序：1 → 4 → 2 → 3
// 两个闹钟都定 0 毫秒：谁先写代码谁先响，不会乱插

同延迟的异步任务按"创建顺序"排队——先写的先跑，不会乱插。

④ 为什么 setTimeout(0) 不立即执行？（核心原理）

// 记住这条流水线：
// 同步代码 → 一口气全跑完 → 主线程空了 → 才轮到异步回调

// setTimeout(0) 不是"现在马上跑"
// 而是"用最快速度排到异步队伍里等"
// 既然要排队，就必须等前面同步代码全清场

把 setTimeout 想成"把纸条递给浏览器，等同步的事都办完再叫我"。作业③让你用自己的话写总结，说清"排队"两个字就得分。