Feature Throttling Debouncing
Definition Executes function at regular intervals Executes function after a pause
Behavior Ignores calls made during the wait period Cancels previous calls and waits for inactivity
Use Case When you want to ensure the function runs every X ms When you want the function to run only after user stops typing/clicking
Example Resize event, scroll event, button spam prevention Search input, form validation, autocomplete
Code Trigger Runs periodically during the event stream Runs once after the event stream ends
Visual ⏱️⏱️⏱️... Controlled bursts ➖➖➖💥 Single delayed fire after calm

✅ Visual Example

Let's say a user is typing:

"J" → "Jo" → "Joh" → "John"

🔁 Throttle (limit = 1s)

  • Calls function every 1s: might fire on "Jo", then "John"

⏳ Debounce (delay = 1s)

  • Waits till user stops typing for 1s: fires only once on "John"

✅ Code Snippets Side by Side

🔁 Throttle 

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

Throttle allows the function to be called once per X ms, even if triggered 1000 times. It’s like saying:
“I'll allow this action just once every 1 second.”

⏳ Debounce 

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

The clearTimeout() prevents the previous scheduled setTimeout() from firing. So, as long as the time between two function calls is less than delay, the actual func() will never be called.
Only when there's a pause longer than or equal to delay, the final scheduled setTimeout() will run and invoke func().

🎯 When to Use What?

Scenario Use
Real-time scroll progress Throttle
Window resize Throttle
Button spam prevention Throttle
Search/autocomplete Debounce
Form input validation Debounce
Live filtering Debounce