Throttle

Limit execution frequency.

scroll events, one handled every 200ms

Solid dots run the handler — the rest are skipped until the interval passes

html

<div class="lod-thr-stage" data-scenario="scroll">
  <p class="lod-thr-label">scroll events, one handled every 200ms</p>
  <div class="lod-thr-track">
    <span class="lod-thr-tick lod-thr-tick--run" style="left:4%; background:#241430;"></span>
    <span class="lod-thr-tick" style="left:14%;"></span><span class="lod-thr-tick" style="left:20%;"></span>
    <span class="lod-thr-tick lod-thr-tick--run" style="left:30%; background:#241430;"></span>
    <span class="lod-thr-tick" style="left:40%;"></span>
    <span class="lod-thr-tick lod-thr-tick--run" style="left:56%; background:#241430;"></span>
  </div>
  <p class="lod-thr-caption">Solid dots run the handler &mdash; the rest are skipped until the interval passes</p>
</div>
<style>
.lod-thr-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430aa; }
.lod-thr-label { margin: 0 0 8px; text-transform: capitalize; }
.lod-thr-track { position: relative; height: 22px; background: #24143011; border-radius: 999px; }
.lod-thr-tick { position: absolute; top: 5px; width: 10px; height: 10px; border-radius: 999px; background: #24143033; }
.lod-thr-tick--run { top: 2px; width: 16px; height: 16px; }
.lod-thr-caption { margin: 8px 0 0; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]/70" data-scenario="scroll">
  <p class="m-0 mb-2 capitalize">scroll events, one handled every 200ms</p>
  <div class="relative h-[22px] bg-[#24143011] rounded-full">
    <span class="absolute top-0.5 w-4 h-4 rounded-full" style="left:4%; background:#241430;"></span>
    <span class="absolute top-[5px] w-2.5 h-2.5 rounded-full bg-[#24143033]" style="left:14%;"></span><span class="absolute top-[5px] w-2.5 h-2.5 rounded-full bg-[#24143033]" style="left:20%;"></span>
    <span class="absolute top-0.5 w-4 h-4 rounded-full" style="left:30%; background:#241430;"></span>
    <span class="absolute top-[5px] w-2.5 h-2.5 rounded-full bg-[#24143033]" style="left:40%;"></span>
    <span class="absolute top-0.5 w-4 h-4 rounded-full" style="left:56%; background:#241430;"></span>
  </div>
  <p class="mt-2">Solid dots run the handler &mdash; the rest are skipped until the interval passes</p>
</div>

react

export function Throttle({
  interval = 200,
  scenario = "scroll",
  showBlocked = true,
  accent = "#241430",
}) {
  const run = { position: "absolute", top: 2, width: 16, height: 16, borderRadius: 999, background: accent };
  const blocked = { position: "absolute", top: 5, width: 10, height: 10, borderRadius: 999, background: "#24143033" };
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430aa" }}>
      <p style={{ margin: "0 0 8px", textTransform: "capitalize" }}>{scenario} events, one handled every {interval}ms</p>
      <div style={{ position: "relative", height: 22, background: "#24143011", borderRadius: 999 }}>
        <span style={{ ...run, left: "4%" }} />
        {showBlocked && <span style={{ ...blocked, left: "14%" }} />}
        {showBlocked && <span style={{ ...blocked, left: "20%" }} />}
        <span style={{ ...run, left: "30%" }} />
        {showBlocked && <span style={{ ...blocked, left: "40%" }} />}
        <span style={{ ...run, left: "56%" }} />
      </div>
      <p style={{ margin: "8px 0 0" }}>Solid dots run the handler &mdash; the rest are skipped until the interval passes</p>
    </div>
  );
}