pinned
Debounce vs Throttle
The difference between debounce and throttle, and when to reach for each.
Debounce
Wait until the user stops firing, then run once.
function debounce(fn: Function, ms: number) {
let timer: ReturnType<typeof setTimeout>;
return (...args: any[]) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), ms);
};
}
Use for: search input, resize handlers, auto-save.
Throttle
Run at most once every N ms, no matter how fast events fire.
function throttle(fn: Function, ms: number) {
let last = 0;
return (...args: any[]) => {
const now = Date.now();
if (now - last >= ms) {
last = now;
fn(...args);
}
};
}
Use for: scroll events, mousemove, rate-limited API calls.
TL;DR
| Debounce | Throttle | |
|---|---|---|
| Fires | After pause | At regular intervals |
| Guaranteed | Only last call | First + spaced calls |