requestAnimationFrame vs debounce vs timer-throttle — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Debounce vs. timer-throttle vs. requestAnimationFrame</h1>
    <p class="pg-sub">
      Same fake "scroll" burst, three strategies. Watch the green bar (what the header
      actually sees) try to keep up with the grey bar (the real scroll position).
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a strategy</div>
      <div class="seg" id="modeSeg" role="group" aria-label="Throttle strategy">
        <button aria-pressed="true" data-mode="none">No throttle</button>
        <button aria-pressed="false" data-mode="debounce">Debounce (150ms)</button>
        <button aria-pressed="false" data-mode="timer">setTimeout throttle (16ms)</button>
        <button aria-pressed="false" data-mode="raf">requestAnimationFrame</button>
      </div>
      <p class="hint" id="modeHint">No throttle: the handler runs on every single scroll event — correct, but wasteful.</p>
      <div class="btn-row" style="margin-top:12px">
        <button class="btn primary" id="run">▶ Simulate a fast scroll</button>
        <button class="btn ghost" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>

<div class="barrow">
        <span class="lbl">Real scroll</span>
        <div class="scenebar truth"><div class="fill" id="truthFill"></div><span class="pct" id="truthPct">0%</span></div>
      </div>
      <div class="barrow">
        <span class="lbl">Header sees</span>
        <div class="scenebar applied"><div class="fill" id="appliedFill"></div><span class="pct" id="appliedPct">0%</span></div>
      </div>

<div class="header-mock" id="headerMock" style="box-shadow: 0 0 0 rgba(0,0,0,0)">
        <span class="dot-title">Sticky header</span>
        <span class="muted" id="headerState">shadow: 0%</span>
      </div>

<div class="status" id="statusRow" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — pick a strategy, then simulate a scroll.</span>
      </div>

<div class="stats">
        <div class="stat"><span class="num" id="statEvents">0</span><span class="lbl">scroll events fired</span></div>
        <div class="stat"><span class="num" id="statFrames">0</span><span class="lbl">frames painted</span></div>
        <div class="stat"><span class="num" id="statCalls">0</span><span class="lbl">handler ran</span></div>
        <div class="stat"><span class="num" id="statLag">—</span><span class="lbl">lag after scroll stopped</span></div>
      </div>
      <p class="hint" id="resultHint">Run it to see the numbers.</p>
    </div>
  </div>

preview

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