debounceTime
accepts
1 input stream,
time period number
-
❯Whenever an event is emitted, the
time periodof silence measured restarts from zero -
❯It waits for a
time periodof silence and then emits the latest value of the input stream
returns a new stream of debounced values
delay
accepts
1 input stream,
time period number
-
❯It emits each value of the input stream with a
time perioddelay
returns a new stream of timeshifted values
Revised on Monday, 8 Oct. 2018
debounceTime vs delay in RxJS
If your stream is created from key presses or mouse movements, you’ll likely deal with bursts of events. But you can’t react to every single event, as it would overload the CPU or flood the servers with too many requests.
A strategy is to wait for a certain “emission silence” window of time (where the user has stopped typing or moving his mouse) to actually handle the latest word or mouse position.
To do so, you can use âťš debounceTime. Like delay, it waits for a certain time period and delays events. But debounceTime can also ignore events.
They both accept a time period argument, such as 3000 milliseconds.
debounceTime is a rate-limiting operator. It ignores events but also delays others.
Trying different time periods
The time period is small enough that no events are ignored
With a 3000ms time period, some events are ignored
As the time period gets larger, even more events are ignored
Next
See also
Freelance Developer Advocate. Motion graphics with code. JavaScript and Elm. cedricsoulas.com
Join the Newsletter
Receive my latest news, product updates and programming visualizations. You can unsubscribe at any time.