/* @file index.html */

rAF vs setTimeout(fn, 0)：谁先执行？

多次点击观察——顺序不是固定的。rAF 取决于渲染时机，setTimeout 取决于宏任务调度。

/* @file main.js */ const results = document.getElementById('results'); const stats = document.getElementById('stats'); let round = 0, rafFirst = 0, stFirst = 0; function runOnce() { return new Promise(resolve => { let first = ''; round++; const el = document.createElement('div'); setTimeout(() => { if (!first) { first = 'setTimeout'; stFirst++; } const span = document.createElement('span'); span.className = 'text-orange-400'; span.textContent = `第 ${round} 次: setTimeout ${first === 'setTimeout' ? '✅ 先' : '后'}`; el.appendChild(span); if (el.childNodes.length === 2) finish(el, resolve); }, 0); requestAnimationFrame(() => { if (!first) { first = 'rAF'; rafFirst++; } const span = document.createElement('span'); span.className = 'text-green-400'; span.textContent = ` | rAF ${first === 'rAF' ? '✅ 先' : '后'}`; el.appendChild(span); if (el.childNodes.length === 2) finish(el, resolve); }); }); } function finish(el, resolve) { results.appendChild(el); results.scrollTop = results.scrollHeight; stats.innerHTML = `rAF 先: ${rafFirst} | setTimeout 先: ${stFirst} | 共 ${round} 次`; resolve(); } document.getElementById('btn-run').addEventListener('click', () => runOnce()); document.getElementById('btn-run10').addEventListener('click', async () => { for (let i = 0; i < 10; i++) { await runOnce(); await new Promise(r => setTimeout(r, 100)); } }); document.getElementById('btn-clear').addEventListener('click', () => { results.innerHTML = ''; stats.innerHTML = ''; round = 0; rafFirst = 0; stFirst = 0; });