debounceTime

accepts 1 input stream, time period number

  • Whenever an event is emitted, the time period of silence measured restarts from zero
  • It waits for a time period of 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 period delay

returns a new stream of timeshifted values

Published on Monday, 4 Dec.
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


debounceTime vs throttleTime in RxJS

Subscribe to reactive.how newsletter

Receive my latest news, tips and animations:

Learn Reactive Programming and stay up-to-date:
Cédric Soulas

Freelance Developer Advocate. Motion graphics with code. JavaScript and Elm. cedricsoulas.com