Debounce simply controls how many times a function to be executed over time.
For example, when typing into a search box, you probably don’t want to be calling an external API every time the user presses a key, it is more likely you would wait until they have paused or have finished entering text. Then after second or 2 fetch the data.
If you run the example below f() is called multiple times
let i = 0;
const f = () => {
console.log(`foo ${++i}`);
};
f(); // foo 1
f(); // foo 2
f(); // foo 3
f(); // foo 4
f(); // fo0 5
console.log(i); // 5Now wrapping the function inside a debounce method only the last call is completed
const debounce = (
fnc: (...params: any[]) => unknown,
n: number,
immediately: boolean = false
) => {
let timer: number | undefined = undefined;
return function (this: any, ...args: any[]) {
if (timer === undefined && immediately) {
fnc.apply(this, args);
}
clearTimeout(timer);
timer = setTimeout(() => fnc.apply(this, args), n);
return timer;
};
};
let i = 0;
const f = debounce(() => console.log(`foo ${++i}`), 2000);
f();
f();
f();
f();
f(); // foo 1
console.log(i) // 0 To recap; If a user keeps clicking on a button it is only after there has been a pause will the last click be carried out.
Throttling, is very similar to debounce but this time it is the FIRST click that is actioned and subsequent clicks are ignored until a period of time has passed.