When listening for events or actions on a page that may occur in rapid-fire succession, a JavaScript debounce function is a common solution. This improves performance and prevents the browser from slowing down or freezing.
A debounce function adds a delay to an event listener to ensure a rapid succession of the events don’t occur. Some use cases for a JavaScript debounce function include performing search queries, checking for window resize, API calls for autocomplete, and so on.
Below is an example that expects the window to be resized but delays the end result. This will ensure multiple window resize events don’t trigger the results too often. The result in this case is printing the window width to the console, but in the context of a real application this could be something more resource-intensive.
let doResizeResult = () => {
console.log(window.innerWidth);
}
let debounce = (callback, delay) => {
let myTimeout;
return () => {
clearTimeout(myTimeout);
myTimeout = setTimeout(() => {
callback()
}, delay);
};
};
let doDebounce = debounce(() => doResizeResult(), 1000)
window.addEventListener('resize', () => doDebounce());
Code language: JavaScript (javascript)You can try the above code using this CodePen demo. Resize the window (or frame) that holds the preview in order to see the results displayed in the console. Notice you can resize the window multiple times in quick succession, but only the last one will be logged.
