What is debouncing and throttling?

Q: What is debouncing and throttling?

**Target Audience:** Engineers preparing for JavaScript / frontend-performance interview questions. **Difficulty:** Easy-Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. This doc is the conceptual overview; for full working implementations see Debounce vs throttle — implement debounce and How do you implement a throttle function? ## 1. Why This Even Matters — A Story First Picture a busy restaurant kitchen with two very different staff members. The first is a chef who only starts cooking an order once the customer has stopped changing their mind — every time the customer adds or removes an ite

The problem

Question presented to candidate: "Can you explain debouncing and throttling, what problem they both solve, and how you would decide which one to use for a given UI event?"

What a strong answer should cover:

Both techniques exist to stop a high-frequency event (scroll, resize, keystroke, mousemove) from running an expensive handler far more often than necessary.
Debounce: collapses a burst of calls into a single call that runs only after the activity has genuinely paused for a set delay. Every new call resets the wait.
Throttle: guarantees the handler runs at most once per fixed interval, no matter how many events fire during that interval. It does not wait for silence.
The concrete decision rule: use debounce when you only care about the final state after activity stops (search-as-you-type, autosave, form validation). Use throttle when you need steady, periodic feedback throughout continuous activity (scroll position tracking, drag handlers, mousemove-driven UI).
Both rely on the same underlying mechanism: a closure holding onto timer state (a timeout id, or a cooldown flag/last-run timestamp) across calls.

Clarifying questions expected:

"Do you want the conceptual distinction, or should I also implement one of them?" (this question is definitional; a good candidate confirms scope before writing code)

Code / implementation expected: Optional — a short side-by-side runnable snippet proving the behavioral difference is enough; full implementations belong to the dedicated implement-debounce / implement-throttle follow-up questions.

performance
optimization
debouncing
throttling

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript / frontend-performance interview questions. Difficulty: Easy-Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. Every result below was actually run on Node.js v24.19.0 — the printed output is real, captured output, not illustrative sample text. This doc is the conceptual overview; for full working implementations see Debounce vs throttle — implement debounce and How do you implement a throttle function?

1. Why This Even Matters — A Story First

Picture a busy restaurant kitchen with two very different staff members. The first is a chef who only starts cooking an order once the customer has stopped changing their mind — every time the customer adds or removes an item, the chef puts the pan down and waits again, and only actually cooks once the customer has

The solution is hidden so you can try first

7 min read · 7 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.