How to throttle a function in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Throttling limits function execution to occur at most once per specified time interval, preventing performance issues during continuous events. With over 25 years of experience in software development and as the creator of CoreUI, I’ve used throttling extensively for scroll handlers, mouse movement, and animation callbacks. From my expertise, the most reliable approach is tracking the last execution time and only allowing subsequent calls after the specified interval. This technique ensures consistent performance while maintaining responsiveness during high-frequency events.
Create a throttle function that limits execution to 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)
}
}
}
Here the throttle function uses an inThrottle flag to control execution frequency. When called, it checks if inThrottle is false, executes the function immediately with func.apply(this, args), sets the flag to true, and schedules it to reset after the limit period. This ensures the function executes immediately on the first call, then blocks subsequent calls until the timeout completes.
Best Practice Note:
This is the same approach we use in CoreUI components for scroll event handlers and real-time data updates. Throttling is perfect for events that should execute regularly but not overwhelm the system, like progress tracking or live data feeds.
