/* @file index.html */

题目 5：综合压轴

console.log('1');
setTimeout(() => console.log('2'), 0);
new Promise(resolve => {
  console.log('3');
  resolve();
}).then(() => {
  console.log('4');
  setTimeout(() => console.log('5'), 0);
}).then(() => console.log('6'));
console.log('7');

/* @file main.js */ const output = document.getElementById('output'); const steps = [ { text: '① 同步: console.log("1") → 输出 1', cls: 'text-blue-400' }, { text: '② setTimeout(fn, 0) → 回调入队宏任务', cls: 'text-gray-500' }, { text: '③ new Promise(executor)——executor 是同步的！', cls: 'text-yellow-500' }, { text: ' console.log("3") → 输出 3，然后 resolve()', cls: 'text-blue-400' }, { text: ' .then(fn-4) 入队微任务', cls: 'text-gray-500' }, { text: '④ 同步: console.log("7") → 输出 7', cls: 'text-blue-400' }, { text: '── 同步代码执行完毕，清空微任务 ──', cls: 'text-yellow-500' }, { text: '⑤ 微任务: console.log("4") → 输出 4', cls: 'text-purple-400' }, { text: ' setTimeout(fn-5, 0) → 回调入队宏任务', cls: 'text-gray-500' }, { text: ' .then(fn-6) 入队微任务（链式）', cls: 'text-gray-500' }, { text: '⑥ 微任务: console.log("6") → 输出 6', cls: 'text-purple-400' }, { text: '── 微任务清空，取宏任务 ──', cls: 'text-yellow-500' }, { text: '⑦ 宏任务: console.log("2") → 输出 2', cls: 'text-orange-400' }, { text: '⑧ 宏任务: console.log("5") → 输出 5', cls: 'text-orange-400' }, { text: '\n✅ 最终输出: 1 → 3 → 7 → 4 → 6 → 2 → 5', cls: 'text-green-400 font-bold' }, { text: '关键: Promise executor 同步 + 微任务全清空后才取宏任务', 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; });