Throttle Expensive Events like Resize and Scroll

Question

You need to handle window.resize efficiently for a responsive dashboard.
Write a throttled function that runs at most once every 100ms.

Implementation

function throttle(fn, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn.apply(this, args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

Usage:

window.addEventListener(
  'resize',
  throttle(() => {
    console.log('Resized!');
  }, 100)
);

Visualization

sequenceDiagram
  participant U as User
  participant R as Resize Event
  participant H as Throttled Handler

  U->>R: Resize 1
  R->>H: Execute ✅
  U->>R: Resize 2 (Ignored)
  U->>R: Resize 3 (Ignored)
  R-->>H: Ready after 100ms

Summary

• Throttling improves responsiveness
• Ideal for scroll, resize, and mousemove
• Prevents layout thrashing and excessive re-renders