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