/* @file index.html */

题目 3：async/await 的执行顺序陷阱

async function foo() {
  console.log('1');
  await bar();
  console.log('2');
}
async function bar() {
  console.log('3');
}
console.log('4');
foo();
console.log('5');

/* @file main.js */ const output = document.getElementById('output'); const steps = [ { text: '① 同步: console.log("4") → 输出 4', cls: 'text-blue-400' }, { text: '② 调用 foo()，进入函数体', cls: 'text-gray-500' }, { text: '③ foo 内部: console.log("1") → 输出 1（await 前，同步）', cls: 'text-orange-400' }, { text: '④ 遇到 await bar()，先执行 bar()', cls: 'text-gray-500' }, { text: '⑤ bar 内部: console.log("3") → 输出 3（bar 整体同步）', cls: 'text-orange-400' }, { text: '⑥ bar() 返回，await "切刀"——foo 的后半段入队微任务', cls: 'text-yellow-500' }, { text: '⑦ 回到外层同步: console.log("5") → 输出 5', cls: 'text-blue-400' }, { text: '── 同步代码执行完毕，清空微任务队列 ──', cls: 'text-yellow-500' }, { text: '⑧ 微任务: console.log("2") → 输出 2（foo 的后半段）', cls: 'text-purple-400' }, { text: '\n✅ 最终输出: 4 → 1 → 3 → 5 → 2', cls: 'text-green-400 font-bold' }, { text: '关键: await 前的代码和被 await 的函数都是同步的', cls: 'text-yellow-500' }, ]; let stepIdx = 0; function addLine(text, cls) { const el = document.createElement('div'); el.className = cls || ''; el.textContent = text; output.appendChild(el); output.scrollTop = output.scrollHeight; } document.getElementById('btn-guess').addEventListener('click', () => { output.innerHTML = ''; stepIdx = steps.length; steps.forEach(s => addLine(s.text, s.cls)); }); document.getElementById('btn-step').addEventListener('click', () => { if (stepIdx >= steps.length) return; addLine(steps[stepIdx].text, steps[stepIdx].cls); stepIdx++; }); document.getElementById('btn-reset').addEventListener('click', () => { output.innerHTML = ''; stepIdx = 0; });