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

See also


The Illustrated Book of RxJS

CĂ©dric Soulas Follow Hire me

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

Subscribe to reactive.how newsletter

Join the Newsletter

Learn Reactive Programming and stay up-to-date:

Receive my latest news, product updates and programming visualizations. You can unsubscribe at any time.

Highlights

@CedricSoulas

Making an illustrated book!

The Illustrated Book of RxJS

Learn more →