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
      );