Implement a debounce function from scratch

Debounce is the most-asked utility in frontend interviews because it tests four things at once: closures, this binding, timers, and API design. The naive answer (setTimeout in a closure) gets you 60% credit; the rest is what a senior adds — this forwarding, cancel/flush, leading vs trailing, and edge cases.

Definition. A debounced function delays invoking fn until wait ms have elapsed since the last call. Useful for: search-as-you-type, autosave, resize handlers, expensive recalculation on scroll.

Trailing-edge (default) implementation. Hold the timer in closure. Each invocation clears the previous and schedules a new one.

this and arguments forwarding. Because the user might use the debounced function as a method (obj.handler = debounce(fn, 200)) or pass it as a DOM event handler, you must use a function expression (not arrow) and call fn.apply(this, args) so the original this and the latest args are preserved.

Cancel. Expose .cancel() to drop the pending invocation — important for cleanup in React's useEffect return, or when the user navigates away.

Flush. .flush() invokes the pending call immediately and clears the timer — useful when a form submits and you want the latest debounced value applied right now.

Leading edge. With { leading: true } the first call fires immediately, then subsequent calls within wait are suppressed; the trailing call fires after silence. Common pattern for "only fire once per burst."

Debounce vs throttle. Debounce waits for silence; throttle guarantees one call per interval. Use debounce when you only care about the final value (search), throttle when you need steady updates (scroll-position UI).

React gotcha. Don't debounce(fn, 200) inline in render — every render produces a new debounced function and the timer never accumulates. Wrap in useMemo (or use useDebouncedCallback from use-debounce) and call .cancel() in the cleanup.