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.


Every mousemove event on the div below increments the counter:

Neither: triggered 0 times


function throttle(fn, ms) {
let id;
return () => {
if (id) return;
id = setTimeout(() => {
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


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