Debounce vs Throttle in JavaScript

1// keystrokes at t = 0, 100, 200, 300, 900, 1000 (ms)
2
3debounce(fn, 400)
4// → one call at t = 1400
5//   (each keystroke restarted the timer; the last one at 1000 won)
6
7throttle(fn, 400)
8// → calls at t = 0, 400, 900
9//   (fires immediately, then at most once per 400ms window)

1function debounce(fn, delay) {
2  let timer = null;
3
4  function debounced(...args) {
5    clearTimeout(timer);
6    timer = setTimeout(() => {
7      timer = null;
8      fn.apply(this, args);        // preserve `this` and the args
9    }, delay);
10  }
11
12  debounced.cancel = () => { clearTimeout(timer); timer = null; };
13  return debounced;
14}
15
16const log = debounce((q) => console.log("search:", q), 300);
17log("r"); log("re"); log("rea"); log("react");
18// → search: react     one call, 300ms after the last one

1function debounce(fn, delay, { leading = false } = {}) {
2  let timer = null;
3
4  return function (...args) {
5    const callNow = leading && timer === null;
6    clearTimeout(timer);
7    timer = setTimeout(() => {
8      timer = null;
9      if (!leading) fn.apply(this, args);
10    }, delay);
11    if (callNow) fn.apply(this, args);
12  };
13}
14
15const save = debounce(submit, 1000, { leading: true });
16save(); save(); save();
17// → one call, immediately — later calls inside the window are dropped.
18//   This is the correct shape for a submit button guard.

1function throttle(fn, limit) {
2  let last = 0;
3
4  return function (...args) {
5    const now = Date.now();
6    if (now - last >= limit) {
7      last = now;
8      fn.apply(this, args);
9    }
10  };
11}
12
13const onScroll = throttle(() => console.log(window.scrollY), 200);
14// → fires immediately on the first scroll event, then at most
15//   every 200ms. Note: nothing fires after scrolling stops, so
16//   the final position may never be reported.

1function throttle(fn, limit) {
2  let last = 0;
3  let timer = null;
4
5  return function (...args) {
6    const now = Date.now();
7    const remaining = limit - (now - last);
8
9    if (remaining <= 0) {
10      clearTimeout(timer);
11      timer = null;
12      last = now;
13      fn.apply(this, args);
14    } else if (!timer) {
15      timer = setTimeout(() => {
16        last = Date.now();
17        timer = null;
18        fn.apply(this, args);
19      }, remaining);
20    }
21  };
22}
23// → fires on the leading edge AND once more after the final event,
24//   which is what you want for a scroll indicator that must end
25//   on the true final position

1// Broken — a new debounced function on every keystroke
2function Search() {
3  const [q, setQ] = useState("");
4  const run = debounce((v) => fetchResults(v), 400);
5
6  return <input onChange={e => { setQ(e.target.value); run(e.target.value); }} />;
7  // → each render makes a new closure with a new timer,
8  //   so the previous timer is never cleared and every
9  //   keystroke eventually fires. Zero debouncing.
10}
11
12// Fixed — one stable debounced function for the component's life
13function Search() {
14  const [q, setQ] = useState("");
15  const run = useMemo(() => debounce(v => fetchResults(v), 400), []);
16
17  useEffect(() => () => run.cancel(), [run]);   // cancel on unmount
18
19  return <input onChange={e => { setQ(e.target.value); run(e.target.value); }} />;
20  // → one timer across renders, and no setState after unmount
21}

1function useDebouncedValue(value, delay = 400) {
2  const [debounced, setDebounced] = useState(value);
3
4  useEffect(() => {
5    const id = setTimeout(() => setDebounced(value), delay);
6    return () => clearTimeout(id);   // reset on every change
7  }, [value, delay]);
8
9  return debounced;
10}
11
12function Search() {
13  const [q, setQ] = useState("");
14  const query = useDebouncedValue(q, 400);
15
16  useEffect(() => { if (query) fetchResults(query); }, [query]);
17
18  return <input value={q} onChange={e => setQ(e.target.value)} />;
19  // → the input stays instant; only the derived value lags.
20  //   No stale closures, no cancel to remember.
21}

1let controller;
2
3const search = debounce(async (q) => {
4  controller?.abort();                 // drop the previous request
5  controller = new AbortController();
6
7  try {
8    const res = await fetch(`/api/search?q=${q}`, { signal: controller.signal });
9    render(await res.json());
10  } catch (e) {
11    if (e.name !== "AbortError") throw e;
12  }
13}, 300);
14// → debounce reduces how many requests start; abort makes sure a
15//   slow earlier response cannot overwrite a newer one. You need
16//   both — debouncing alone does not fix out-of-order responses.