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.