Debounce vs Throttle Interview Questions

One of the most frequently asked frontend interview questions is:

What is the difference between Debounce and Throttle?

Many developers know the definitions:

Debounce = Wait
Throttle = Limit

But interviewers often go deeper:

• Why do we need them?
• How do they improve performance?
• When should you use one over the other?
• How are they implemented internally?
• Which one is better for search inputs, scrolling, and resizing?

Let's understand both concepts from first principles.

1. Why Do We Need Debounce and Throttle?#

Modern browsers fire some events extremely frequently.

Examples:

scroll
mousemove
resize
keypress
input
touchmove

A user scrolling a page can easily trigger:

100+ events per second

Without optimization:

window.addEventListener("scroll", fetchData);

The function may execute hundreds of times.

Problems:

• Excessive API calls
• Unnecessary re-renders
• High CPU usage
• Poor user experience

Debounce and throttle help control how often functions execute.

2. What is Debounce & Implementation#

Debounce delays execution until a specified period of inactivity has passed.

Example:

Type
Type
Type
Type
Stop
 ↓
Execute

The function only runs after the user stops triggering events.

Search Input Example#

Without debounce:

r      → API
re     → API
rea    → API
reac   → API
react  → API

Five requests.

With debounce:

r
re
rea
reac
react
 ↓
Wait 500ms
 ↓
API Call

Only one request.

Debounce Timeline#

Delay:

500ms

Events:

Event
Event
Event
Event
      ↓
Wait 500ms
      ↓
Execute

Only the final event survives.

Debounce Implementation#

function debounce(fn, delay) {
  let timer;

  return function (...args) {
    clearTimeout(timer);

    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

3. What is Throttle & Implementation#

Throttle ensures a function executes at most once during a specified time interval.

Example:

Scroll
 ↓
Execute

Scroll
 ↓
Ignored

Scroll
 ↓
Ignored

1 Second Later

Scroll
 ↓
Execute

The function executes at a fixed rate.

Throttle Timeline#

Interval:

1000ms

Events:

Event Event Event Event Event
 ↓
Execute

Wait 1s

Event Event Event
 ↓
Execute

Unlike debounce, events are not continuously delayed.

Throttle Implementation#

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

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

    if (now - lastExecution >= delay) {
      lastExecution = now;

      fn.apply(this, args);
    }
  };
}

Visual Comparison#

Debounce#

Event Event Event Event
                 ↓
             Wait
                 ↓
             Execute

Throttle#

Event Event Event Event Event
 ↓
Execute

Wait

Event Event Event
 ↓
Execute

4. Debounce vs. Throttle: Core Differences#

Debounce

Execute After Activity Stops

Throttle

Execute At Fixed Intervals

This is the most important interview answer.

Search Box Example#

Consider:

<input onChange={searchUsers} />

Goal:

Send API request
only after user stops typing

Best choice:

Debounce

Because intermediate keystrokes are unnecessary.

Scroll Tracking Example#

Consider:

window.addEventListener("scroll", updateScrollPosition);

Goal:

Update position while scrolling

Best choice:

Throttle

Users expect continuous updates.

Window Resize Example#

window.addEventListener("resize", updateLayout);

Goal:

Run after resizing finishes

Best choice:

Debounce

Infinite Scroll Example#

window.addEventListener("scroll", loadMoreData);

Goal:

Check position continuously

Best choice:

Throttle

5. Real Frontend Use Cases & Timeline Comparison#

Debounce#

Commonly used for:

• Search autocomplete
• Form validation
• Auto-save drafts
• Window resize
• API requests

Example:

debounce(searchUsers, 500);

Throttle#

Commonly used for:

• Scroll listeners
• Mouse movement tracking
• Drag events
• Infinite scrolling
• Analytics tracking

Example:

throttle(trackMouse, 100);

Interview Question#

Which is better?

Debounce or Throttle?

Answer:

Neither.

They solve different problems.

Choose based on desired behavior.

6. React Integration Patterns#

const debouncedSearch = useMemo(
  () =>
    debounce((value) => {
      fetchUsers(value);
    }, 500),
  [],
);

Usage:

<input onChange={(e) => debouncedSearch(e.target.value)} />

Reduces API requests.

React Example: Throttle#

useEffect(() => {
  const handler = throttle(() => {
    console.log(window.scrollY);
  }, 200);

  window.addEventListener("scroll", handler);

  return () => window.removeEventListener("scroll", handler);
}, []);

Improves scroll performance.

Debounce with Immediate Flag#

Some implementations support:

debounce(fn, 500, true);

Behavior:

First Event
 ↓
Execute Immediately

Subsequent Events
 ↓
Ignored

Wait 500ms
 ↓
Ready Again

This is called:

Leading Edge Debounce

7. API Call Sizing: Throttle vs. Debounce#

Suppose a user types:

r
re
rea
reac
react

Debounce

1 API Call

Throttle

May Trigger Multiple Calls

Example:

r
 ↓
API

rea
 ↓
API

react
 ↓
API

For search APIs:

Debounce is usually preferred

8. Common Interview Q&A#

Which One Improves Performance More?#

Both improve performance.

The correct choice depends on behavior requirements.

Can Debounce Completely Skip Intermediate Events?#

Yes.

That is its purpose.

Only the final event executes.

Can Throttle Skip Events?#

Yes.

Events occurring within the throttle interval are ignored.

Which One Is Better for Search Inputs?#

Debounce

Because users care about the final input.

Which One Is Better for Scroll Events?#

Throttle

Because updates must happen continuously.

What JavaScript Concept Powers Debounce?#

Closures.

Example:

let timer;

remains available through a closure.

What JavaScript Concept Powers Throttle?#

Closures.

Example:

let lastExecution;

persists between function calls.

Senior-Level Interview Answer#

Debounce and throttle are performance optimization techniques used to control the frequency of function execution. Debounce delays execution until a period of inactivity has passed, making it ideal for search inputs, form validation, and auto-save features. Throttle limits execution to at most once per specified interval, making it ideal for scroll, resize, and mouse movement events. Internally, both techniques rely on closures to maintain state between invocations. The choice depends on whether the application needs the final event only (debounce) or regular updates during continuous activity (throttle).

Common Interview Mistakes#

❌ "Debounce and throttle do the same thing."

Correct:

Debounce waits for inactivity.
Throttle limits execution frequency.

❌ "Throttle executes only once."

Correct:

Throttle executes repeatedly,
but at a controlled rate.

❌ "Debounce is always better."

Correct:

Each solves a different problem.

❌ "Debounce and throttle are built into JavaScript."

Correct:

They are commonly implemented
using closures and timers.

Debounce vs Throttle Summary#

Key Takeaways#

• Debouncing: Postpones execution until a specified delay has elapsed since the last event tick (e.g. search suggestions).
• Throttling: Enforces a maximum execution frequency, running the callback at most once per duration (e.g. scroll tracking).
• Interactive Control: Debounce groups bursts into a single call; throttle spaces out continuous execution.
• React Patterns: Use custom hooks or refs inside React to preserve debounced/throttled instances across renders.