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.