Throttling vs Debouncing

As both functions help you postpone and reduce the rate of some execution.
  • Throttle: the original function be called at most once per specified period.
  • Debounce: the original function be called after the caller stops calling the decorated function after a specified period.
To put it in simple terms:
  • Throttling will delay executing a function. It will reduce the notifications of an event that fires multiple times.
  • Debouncing will bunch a series of sequential calls to a function into a single call to that function. It ensures that one notification is made for an event that fires multiple times.
Example

http://demo.nimius.net/debounce_throttle/
Debouncing will prevent a function from running while it is still being called frequently. A debounced function will only run after it has been determined that it is no longer being called, at which point it will run exactly once. Practical examples of debouncing:
  • Auto-saving or validating the contents of a text-field if the user "stopped typing": the operation will only be done once, AFTER it has been determined that the user is no longer typing (no longer pressing keys).
  • Logging where users rest their mouse: the user is no longer moving their mouse, so the (last) position can be logged.
Throttling will simply prevent a function from running if it has run recently, regardless of the call frequency. Practical examples of throttling:
  • Implementations of v-sync are based on throttling: the screen will only be drawn if 16ms elapsed since the last screen draw. No matter how many times the screen refresh functionality is called, it will only run at most once every 16ms.
Throttling 1 sec on search bar- if users types 'Long text...' in 10 sec, then it should call search about 10 times. First search will be called when first key 'L' is pressed.
Debouncing pistol for 1 sec- When user sees an enemy, he clicks mouse, but it will not shoot. He will click again several times in that sec but it will not shoot. He will see if it still has bullets, at that time (1 sec after last click) pistol will fire automatically.
Edit:
Differences
+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

Comments

Popular Posts