What is throttling?

Throttling is a programming technique used to control the rate at which a function is executed. When an event is triggered continuously—such as during window resizing, scrolling, or mouse movement—throttling ensures that the associated event handler is not called more often than a specified interval. This helps improve performance by reducing the number of expensive function calls and preventing performance bottlenecks.

Common use cases:

• Window resize events
• Scroll events
• Mouse movement or drag events
• API rate limiting

How does throttling work? Throttling will execute the function at most once every specified time interval, ignoring additional calls until the interval has passed.

Example: Throttle Implementation and Usage

JavaScript

// Simple throttle function: allows 'func' to run at most once every 'limit' ms
function throttle(func, limit) {
let inThrottle = false;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(() => (inThrottle = false), limit);
}
};
}

// Usage: throttling a scroll event handler
function handleScrollAnimation() {
console.log('Scroll event triggered');
}

window.addEventListener(
"scroll",
throttle(handleScrollAnimation, 100) // Will run at most once every 100ms
);