queueMicrotask vs setTimeout — the race

<div class="pg">
    <h1 class="pg-title">🏁 queueMicrotask vs setTimeout(0)</h1>
    <p class="pg-sub">
      Three callbacks get scheduled in the same instant. Watch which one actually runs first —
      and whether making one of them do more work changes the result.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field">
        <div class="ctl-label">
          <span>Promise chain length: <strong id="chainLenLabel">20</strong> hops</span>
        </div>
        <input type="range" id="chainLen" min="1" max="500" value="20" step="1" />
      </div>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">Start the race</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="1">1 hop</button>
        <button class="btn sm" data-preset="50">50 hops</button>
        <button class="btn sm" data-preset="500">500 hops</button>
      </div>
      <p class="hint" style="margin-top:10px">
        All three are scheduled in the same synchronous block, in this order:
        <code>setTimeout</code> first, then the promise chain, then <code>queueMicrotask</code> —
        source order doesn't decide who wins.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="track">
        <div class="lane" id="laneMicro">
          <span class="lane-name"><code>queueMicrotask(fn)</code></span>
          <span class="lane-badge" id="badgeMicro">waiting…</span>
        </div>
        <div class="lane" id="laneChain">
          <span class="lane-name">Promise chain, <span id="chainCountLabel">20</span> hops</span>
          <span class="lane-badge" id="badgeChain">waiting…</span>
        </div>
        <div class="lane" id="laneTimeout">
          <span class="lane-name"><code>setTimeout(fn, 0)</code></span>
          <span class="lane-badge" id="badgeTimeout">waiting…</span>
        </div>
      </div>
      <div class="status" id="statusRow" style="margin-top:14px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Pick a chain length and click "Start the race."</span>
      </div>
      <p class="hint">
        The two microtask lanes are revealed in true finish order, staggered slightly so the order
        is visible — the real gap between them is usually a fraction of a millisecond.
        <code>setTimeout</code> finishes last no matter how long the chain gets, because the entire
        microtask queue has to drain before the browser is allowed to run the next task.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.