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