Lesson 2 of 8
Debouncing calls
- 14 min
- 6 checks
- 3 hints
- Go to task
Goal
A single call after the user stops
Explanation
A search box that sends a request on every keystroke sends ten requests for a single word, and nine of them are useless. Worse, the reply to the last request can arrive before the reply to the one before it, leaving an outdated result on screen.
Debouncing holds off until the user stops. Every new call cancels the previous timer and starts a fresh one, so the function only runs once the delay has passed since the last call.
The pattern is only a few lines long, yet it's one of the most widely used in user interfaces.
Your task
Write debounce(fn, ms) so it returns a debounced version of fn that passes the arguments through unchanged. Then create debounce(search, 200) once and call it with the field's value on every input event of #q.
Checks
6 checks- debounce returns a function
- The function doesn't run right away
- A quick burst of calls runs once
- Passes the arguments of the last call
- Two bursts spaced apart run twice
- The input is wired to the debounced version