Debouncing
Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often that they stall the performance of the web page. In other words, it limits the rate at which a function can fire.
1. The Concept
Imagine an elevator. The elevator doesn't leave immediately when the first person enters. It waits for a few seconds. If another person enters, the timer resets. The elevator only leaves when no new person has entered for the specified duration.
In JavaScript, debouncing forces a function to wait a certain amount of time before running. If the event is triggered again within that time, the timer resets.
2. Implementation
A basic debounce function takes a function (func) and a delay (wait) as arguments.
function debounce(func, wait) {
let timeout;
return function executedFunction(...args) {
const later = () => {
clearTimeout(timeout);
func.apply(this, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}3. Practical Use Case: Search Input
Without debouncing, an API call would be made for every keystroke.
- User types "Apple".
- Events: "A", "Ap", "App", "Appl", "Apple".
- 5 API calls.
With debouncing (e.g., 300ms), the API call is only made once the user stops typing for 300ms.
const searchInput = document.getElementById('search');
function performSearch(query) {
console.log('Searching for:', query);
// API call logic here
}
const debouncedSearch = debounce((event) => {
performSearch(event.target.value);
}, 300);
searchInput.addEventListener('input', debouncedSearch);4. Debouncing vs. Throttling
- Debounce: "Group multiple calls into one single call." (Execute only after a period of inactivity).
- Use case: Search bar, resizing window (wait until done).
- Throttle: "Execute at most once every X milliseconds." (Execute at a steady rate).
- Use case: Scrolling, mouse movement, gaming inputs.
programming/javascript/vanilla/javascript programming/throttling-pattern programming/javascript/vanilla/events