How to throttle resize event in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Throttling resize events prevents performance degradation during window resizing by limiting function execution frequency to manageable intervals. With over 25 years of experience in software development and as the creator of CoreUI, I’ve implemented resize event optimization in responsive layouts and adaptive components. From my expertise, the most practical approach is using throttling to execute resize handlers at regular intervals rather than on every resize event. This technique maintains UI responsiveness while preventing excessive recalculations during continuous resizing.
Create a throttled resize event handler that executes at most once per specified time interval.
function throttle(func, limit) {
let inThrottle
return function(...args) {
if (!inThrottle) {
func.apply(this, args)
inThrottle = true
setTimeout(() => inThrottle = false, limit)
}
}
}
const handleResize = throttle(() => {
console.log('Window size:', window.innerWidth, window.innerHeight)
}, 100)
window.addEventListener('resize', handleResize)
Here the throttle function limits resize handler execution to once every 100 milliseconds. The handleResize function executes immediately on the first resize event, then blocks subsequent calls until the timeout completes. This ensures consistent execution intervals during continuous resizing while preventing the handler from overwhelming the browser with excessive function calls.
Best Practice Note:
This is the same approach we use in CoreUI components for responsive breakpoint detection and layout recalculations. Throttled resize events are perfect for operations that should respond to size changes regularly but don’t need to execute on every single resize event.
