Throttle vs. Debounce
This might just be me, but I confuse debounce
and throttle
.
I can never remember the difference.
This post should help me remember the difference.
Neither
Every mousemove
event on the div
below increments the counter:
Neither: triggered 0 times
Throttle
function throttle(fn, ms) {
let id;
return () => {
if (id) return;
id = setTimeout(() => {
fn();
id = undefined;
}, ms);
};
}
When using throttle
, your function will run at most once per interval, no matter how many times it is triggered in that interval.
Throttle 200ms: triggered 0 times
Debounce
function debounce(fn, ms) {
let id;
return () => {
if (id) clearTimeout(id);
id = setTimeout(fn, ms);
};
}
When using debounce
, your function will run after it has not been triggered for a full interval.
Debounce 200ms: triggered 0 times