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

The Illustrated Book of RxJS

Cédric Soulas Follow Hire me

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

Subscribe to 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.



Making an illustrated book!

The Illustrated Book of RxJS

Learn more →