<strong>Debouncing</strong> delays execution until after a pause in events, while <strong>throttling</strong> limits execution to once per time interval. Both optimize performance by reducing function calls.
The Elevator Analogy
Debouncing: Elevator waits 5 seconds after last person enters. Throttling: Elevator leaves every 30 seconds regardless of how many people arrive.
Debouncing (Wait for Everyone)
Delay until no more people
Throttling (Every 30 Seconds)
Go at fixed intervals
People (Events)
Keep arriving
User Input
Control Execution
Executes Optimally
Debouncing: Wait for pause
User types 'hello' → wait 300ms after last keystroke
Debouncing: Execute once
Only call API after user stops typing
Throttling: Execute at intervals
User scrolls → execute every 100ms max
Throttling: Ignore extra calls
Discard calls that happen within interval
Wrong
"Debouncing and throttling are the same"
Correct
<strong>Different use cases</strong>. Debouncing: Search input (wait for user to finish). Throttling: Scroll events (limit frequency). Debouncing delays, throttling limits rate.
When to use each:
Debouncing: Search autocomplete (wait 300ms after typing stops)
Debouncing: Window resize (recalculate layout after resizing stops)
Throttling: Infinite scroll (check scroll position max every 200ms)
Throttling: Mouse move tracking (update position max 60 times/second)