Throttling in JavaScript

#javascript

🧠 What is Throttling in JavaScript?

In JavaScript, throttling is a technique to:

Limit how often a function can execute within a given time interval

🎯 One-Line Difference from Debounce

Debounce → run after user stops
Throttle → run at most once every X ms

⚡ Problem Throttling Solves

Some events fire continuously:

scroll
resize
mousemove

👉 Without control:

Scroll → function fires 100+ times/sec ❌

👉 With throttling:

Scroll → function fires every 200ms ✅

🔬 Core Idea

“Allow execution only once per time window”

🧩 Step-by-Step Example

Scenario: Throttle with 1000ms (1 second)

User scrolls continuously.

Timeline

Time:   0ms   200ms   400ms   600ms   800ms   1000ms

Events:  ✔     ✔       ✔       ✔       ✔       ✔
Run:     ✅     ❌      ❌      ❌      ❌      ✅

👉 Only first and after 1s → execution happens

⚙️ How It Works Internally

Key idea:
Track last execution time
Ignore calls until delay passes

💻 Basic Throttle Implementation

javascript


function throttle(fn, delay) {
  let lastCall = 0;

  return function (...args) {
    const now = Date.now();

    if (now - lastCall >= delay) {
      lastCall = now;
      fn.apply(this, args);
    }
  };
}

🔍 Step-by-Step Internal Flow

First call

lastCall = 0
now = 1000

→ execute function
→ lastCall = 1000

Next call (within delay) now = 1200

1200 - 1000 = 200 < 1000 ❌
→ ignore

After delay now = 2000

2000 - 1000 = 1000 ✅
→ execute again

🧠 Visual Flow

Event → Check time → Execute or Ignore

⚙️ Alternative Implementation (Timer-Based)

function throttle(fn, delay) {
  let timer = null;

  return function (...args) {
    if (!timer) {
      fn.apply(this, args);

      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

🔍 How This Version Works

First call → executes immediately
Sets a lock (timer)
Ignores calls until timer resets

⚡ Real-World Example
Scroll Handler

window.addEventListener(
  "scroll",
  throttle(() => {
    console.log("Scroll handled");
  }, 200)
);

👉 Instead of 100+ calls/sec → controlled calls

🧠 Use Cases

✅ Best for:
Scroll tracking
Window resize
Mouse movement
Button spam prevention

⚖️ Throttle vs Debounce (Deep Comparison)

🔥 Advanced Throttle (Leading + Trailing)


function throttle(fn, delay, options = { leading: true, trailing: true }) {
  let lastCall = 0;
  let timer;

  return function (...args) {
    const now = Date.now();

    if (!lastCall && options.leading === false) {
      lastCall = now;
    }

    const remaining = delay - (now - lastCall);

    if (remaining <= 0) {
      clearTimeout(timer);
      lastCall = now;
      fn.apply(this, args);
    } else if (!timer && options.trailing !== false) {
      timer = setTimeout(() => {
        lastCall = Date.now();
        timer = null;
        fn.apply(this, args);
      }, remaining);
    }
  };
}