Debounce vs Throttle: Real-World Use Cases

Debounce vs Throttle: Real-World Use Cases

Debounce Use Cases

// Search input (300ms)
const search = debounce((q) => fetchResults(q), 300);
input.addEventListener("input", (e) => search(e.target.value));

// Auto-save (1000ms)
const save = debounce(() => saveDocument(), 1000);
editor.addEventListener("input", save);

// Window resize (250ms)
const onResize = debounce(() => recalculateLayout(), 250);
window.addEventListener("resize", onResize);

Throttle Use Cases

// Scroll (100ms)
const onScroll = throttle(() => updateScrollPosition(), 100);
window.addEventListener("scroll", onScroll);

// Mousemove (50ms)
const onMouseMove = throttle((e) => updateCursor(e), 50);
document.addEventListener("mousemove", onMouseMove);

// Button click (500ms, prevent rapid clicks)
const onClick = throttle(() => submitForm(), 500);
button.addEventListener("click", onClick);

The Takeaway

Debounce: search (300ms), auto-save (1000ms), resize (250ms). Throttle: scroll (100ms), mousemove (50ms), button click (500ms). The key: debounce waits for activity to stop; throttle rate-limits during activity.