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


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


debounceTime vs throttleTime in RxJS

See also

Decks of cards for RxJS

Cédric Soulas Follow Hire me

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

Subscribe to newsletter

Receive my latest news about Reactive Programming, free deck samples and RxJS tips:

Learn Reactive Programming and stay up-to-date: