Debouncing

Delay execution until activity stops.

html

<div class="dbn" data-delay="400">
  <input class="dbn__input" type="text" placeholder="Search products…" style="border-color:#F5C2E0;" />
  <p class="dbn__delay">Fires 400ms after you stop typing</p>
  <p class="dbn__status" role="status">Try typing above &mdash; nothing fires until you pause.</p>
</div>
<script>(function () {
  var el = document.querySelector(".dbn");
  if (!el) return;
  var delay = Number(el.dataset.delay);
  var input = el.querySelector(".dbn__input");
  var status = el.querySelector(".dbn__status");
  var timer = null;
  input.addEventListener("input", function () {
    status.textContent = "Typing\u2026";
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      status.textContent = input.value ? "Search fired for: \u201C" + input.value + "\u201D" : "Try typing above \u2014 nothing fires until you pause.";
    }, delay);
  });
})();</script>
<style>
.dbn { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.dbn__input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 2px solid; border-radius: 8px; font-size: 13px; margin-bottom: 8px; }
.dbn__delay { margin: 0 0 8px; font-size: 10px; color: #24143099; }
.dbn__status { margin: 0; font-size: 12px; font-weight: 600; min-height: 18px; }
</style>

tailwind

<div class="dbntw font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border" data-delay="400">
  <input class="dbntw__input w-full box-border py-2.5 px-3 border-2 rounded-lg text-[13px] mb-2" type="text" placeholder="Search products…" style="border-color:#F5C2E0;" />
  <p class="m-0 mb-2 text-[10px] text-[#24143099]">Fires 400ms after you stop typing</p>
  <p class="dbntw__status m-0 text-xs font-semibold min-h-[18px]" role="status">Try typing above &mdash; nothing fires until you pause.</p>
</div>
<script>(function () {
  var el = document.querySelector(".dbntw");
  if (!el) return;
  var delay = Number(el.dataset.delay);
  var input = el.querySelector(".dbntw__input");
  var status = el.querySelector(".dbntw__status");
  var timer = null;
  input.addEventListener("input", function () {
    status.textContent = "Typing\u2026";
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      status.textContent = input.value ? "Search fired for: \u201C" + input.value + "\u201D" : "Try typing above \u2014 nothing fires until you pause.";
    }, delay);
  });
})();</script>

react

import { useRef, useState } from "react";

export function Debouncing({
  delayMs = 400,
  placeholderText = "Search products…",
  accent = "#F5C2E0",
  showDelay = true,
}) {
  const [status, setStatus] = useState("Try typing above \u2014 nothing fires until you pause.");
  const timer = useRef(null);
  const onChange = (e) => {
    var value = e.target.value;
    setStatus("Typing\u2026");
    if (timer.current) clearTimeout(timer.current);
    timer.current = setTimeout(() => {
      setStatus(value ? `Search fired for: \u201C${value}\u201D` : "Try typing above \u2014 nothing fires until you pause.");
    }, delayMs);
  };
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <input type="text" placeholder={placeholderText} onChange={onChange}
        style={{ width: "100%", boxSizing: "border-box", padding: "9px 12px", border: `2px solid ${accent}`, borderRadius: 8, fontSize: 13, marginBottom: 8 }} />
      {showDelay && <p style={{ margin: "0 0 8px", fontSize: 10, color: "#24143099" }}>Fires {delayMs}ms after you stop typing</p>}
      <p role="status" style={{ margin: 0, fontSize: 12, fontWeight: 600, minHeight: 18 }}>{status}</p>
    </div>
  );
}