https://www.greatfrontend.com/interviews/study/three-months/questions/javascript/debounce
Debouncing is a technique used to control how many times we allow a function to be executed over time. When a JavaScript function is debounced with a wait time of X milliseconds, it must wait until after X milliseconds have elapsed since the debounced function was last called.
You almost certainly have encountered debouncing in your daily lives before (e.g. when entering an elevator). Only after X duration of not pressing the "Door open" button (the debounced function not being called) will the elevator door actually close (the callback function is executed).
Implement a debounce function which accepts a callback function and a wait duration. Calling debounce() returns a function which has debounced invocations of the callback function following the behavior described above.
let i = 0;
function increment() {
i++;
}
const debouncedIncrement = debounce(increment, 100);
// t = 0: Call debouncedIncrement().
debouncedIncrement(); // i = 0
// t = 50: i is still 0 because 100ms have not passed.
// t = 100: increment() was invoked and i is now 1.
debouncedIncrement() is called multiple times.
let i = 0;
function increment() {
i++;
}
const debouncedIncrement = debounce(increment, 100);
// t = 0: Call debouncedIncrement().
debouncedIncrement(); // i = 0
// t = 50: i is still 0 because 100ms have not passed.
// Call debouncedIncrement() again.
debouncedIncrement(); // i = 0
// t = 100: i is still 0 because it has only
// been 50ms since the last debouncedIncrement() at t = 50.
// t = 150: Because 100ms have passed since
// the last debouncedIncrement() at t = 50,
// increment was invoked and i is now 1 .
Even though you called debouncedIncrement() two times, the real increment() runs once, only after the user stops calling for 100ms.
Time -->
0ms 50ms 100ms 150ms
|-----------|-------------|-------------|
Call #1 Call #2 50ms 100ms
Schedules Cancels NOT run increment()
run at 100 old timer (only 50ms) RUNS NOW
New timer
runs at 150