Without debounce, typing "hello" can fire five network requests.
Direct answer
Debounce wraps a function so it only runs after the user has stopped triggering it for a set delay. It reduces unnecessary work, such as sending a search request on every keystroke.
Implementation
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
const search = debounce((query) => {
console.log("Searching for", query);
}, 300);
input.addEventListener("input", (e) => search(e.target.value));
Debounce vs throttle
| Debounce | Throttle | |
|---|---|---|
| Runs | after activity stops | at regular intervals |
| Good for | search, auto-save | scroll, resize |
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript course turns this into short lessons you can play in a few minutes a day. It has 37 lessons, and you can start free.
The bottom line
Debounce is a closure plus setTimeout. A small function with a big impact.
