Question Bank
Debounce, Throttle, and Rate Limiting Quiz
Difficulty: Medium
Implement the rate-limiting primitives that ship in every UI codebase: debounce, throttle, leading-edge debounce, and `requestAnimationFrame`-paced throttling.
Debounce, Throttle, and Rate Limiting Quiz
Implement the rate-limiting primitives that ship in every UI codebase: debounce, throttle, leading-edge debounce, and `requestAnimationFrame`-paced throttling.
1,070 views
5
Implement debounce(fn, delay) so fn only runs after delay ms have passed since the last call. Preserve this and the original arguments.
Examples
Example 1:
Input: const d = debounce(console.log, 100); d('a'); d('b'); d('c');
Output: c
Explanation: Each call resets the timer, so only the final invocation's args (`'c'`) survive to fire after the quiet period.Implement throttle(fn, interval) so fn fires at most once per interval ms. Use a timestamp guard rather than a trailing timer.
Examples
Example 1:
Input: const t = throttle(console.log, 100); t(1); t(2); /* wait 110ms */ t(3);
Output: 1, 3
Explanation: The second call is inside the window and is dropped; the third call lands outside the window and fires.Implement a leading-edge debounce that fires on the first call of a burst and ignores any follow-up calls until the silence period ends.
Examples
Example 1:
Input: const d = debounceLeading(console.log, 100); d('a'); d('b'); d('c'); /* wait 110ms */ d('d');
Output: a, d
Explanation: First call fires immediately. Subsequent calls inside the window are suppressed. After 100ms of silence, the next call starts a new burst.Build an rafThrottle(fn) that limits fn to at most one call per animation frame. Useful for scroll/resize handlers that mutate the DOM.
Examples
Example 1:
Input: window.addEventListener('scroll', rafThrottle(onScroll))
Output: onScroll runs at most ~60 times/second, aligned with the frame.
Explanation: requestAnimationFrame coalesces work to one call per repaint; reads/writes batched this way avoid layout thrashing.