Debounce vs throttle — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Debounce vs throttle, side by side</h1>
    <p class="pg-sub">
      Type in the box below (or click a preset). Every keystroke fires a <code>raw</code> event —
      watch how <code>debounce</code> waits for you to stop, while <code>throttle</code> lets calls
      through on a fixed schedule the whole time you're typing.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Type here</div>
      <input id="typeTarget" type="text" placeholder="Start typing…" autocomplete="off" />
      <div class="delayRow">
        <span class="hint" style="margin:0">Wait / interval:</span>
        <input type="range" id="delay" min="100" max="1000" step="50" value="400" />
        <span class="delayVal" id="delayVal">400ms</span>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="javascript">Auto-type "javascript"</button>
        <button class="btn sm" data-preset="slow">Auto-type slowly</button>
        <button class="btn ghost sm" id="reset">Reset</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> What actually ran</div>
      <div class="counters">
        <div class="counter raw">
          <span class="big-num" id="rawCount">0</span>
          <span class="lbl">raw keystrokes</span>
        </div>
        <div class="counter deb">
          <span class="big-num" id="debCount">0</span>
          <span class="lbl">debounce fired</span>
        </div>
        <div class="counter thr">
          <span class="big-num" id="thrCount">0</span>
          <span class="lbl">throttle fired</span>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:14px">
        <span class="dot info" id="dot"></span><span id="statusText">Ready — start typing above.</span>
      </div>
      <p class="hint">Debounce (green) only calls its function once you go quiet for the delay above.
        Throttle (orange) calls its function immediately, then at most once per interval while you
        keep typing — it never waits for silence.</p>
      <div class="output log" id="log" style="margin-top:10px; max-height: 220px; overflow-y:auto"></div>
    </div>
  </div>

preview

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