/* @file index.html */

async/await 的"切刀"模型

每个 await 是一把刀——前半段同步执行，后半段作为微任务入队。观察颜色区分。

/* @file style.css */ .sync { color: #60a5fa; } .async-before { color: #f97316; } .async-after { color: #a78bfa; } .comment { color: #6b7280; font-style: italic; } /* @file main.js */ const output = document.getElementById('output'); let order = 0; function emit(label, cls = '') { const el = document.createElement('div'); el.className = cls; el.textContent = `${++order}. ${label}`; output.appendChild(el); output.scrollTop = output.scrollHeight; } function divider(text) { const el = document.createElement('div'); el.className = 'comment'; el.textContent = `--- ${text} ---`; output.appendChild(el); } document.getElementById('btn-single').addEventListener('click', () => { output.innerHTML = ''; order = 0; divider('代码: C → async fn(A → await → B) → D'); async function demo() { emit('A — async 函数体，await 之前（同步）', 'async-before'); await Promise.resolve(); emit('B — await 之后（微任务）', 'async-after'); } emit('C — 调用 async 函数之前（同步）', 'sync'); demo(); emit('D — 调用 async 函数之后（同步）', 'sync'); queueMicrotask(() => { divider('结果: C → A → D → B'); emit('解释: await 把函数"切"成两半，后半段排队等同步代码跑完', 'comment'); }); }); document.getElementById('btn-double').addEventListener('click', () => { output.innerHTML = ''; order = 0; divider('代码: 同时调用 fn1() 和 fn2()'); async function fn1() { emit('1 — fn1 await 之前（同步）', 'async-before'); await Promise.resolve(); emit('2 — fn1 await 之后（微任务）', 'async-after'); } async function fn2() { emit('3 — fn2 await 之前（同步）', 'async-before'); await Promise.resolve(); emit('4 — fn2 await 之后（微任务）', 'async-after'); } fn1(); fn2(); emit('5 — 两个函数调用之后（同步）', 'sync'); queueMicrotask(() => queueMicrotask(() => { divider('结果: 1 → 3 → 5 → 2 → 4'); emit('解释: 两个 await 的"后半段"按注册顺序排队', 'comment'); })); }); document.getElementById('btn-clear').addEventListener('click', () => { output.innerHTML = ''; order = 0; });