W3cubDocs

/RxJS

debounceTime

function stable

Emits a value from the source Observable only after a particular time span has passed without another source emission.

`debounceTime<T>(dueTime: number, scheduler: SchedulerLike = async): MonoTypeOperatorFunction<T>`

Parameters

dueTime

The timeout duration in milliseconds (or the time unit determined internally by the optional scheduler) for the window of time required to wait for emission silence before emitting the most recent source value.

scheduler

Optional. Default is async.

The SchedulerLike to use for managing the timers that handle the timeout for each value.

Returns

MonoTypeOperatorFunction<T>: An Observable that delays the emissions of the source Observable by the specified dueTime, and may drop some values if they occur too frequently.

Description

It's like delay, but passes only the most recent value from each burst of emissions.

debounceTime marble diagram

debounceTime delays values emitted by the source Observable, but drops previous pending delayed emissions if a new value arrives on the source Observable. This operator keeps track of the most recent value from the source Observable, and emits that only when dueTime enough time has passed without any other value appearing on the source Observable. If a new value appears before dueTime silence occurs, the previous value will be dropped and will not be emitted on the output Observable.

This is a rate-limiting operator, because it is impossible for more than one value to be emitted in any time window of duration dueTime, but it is also a delay-like operator since output emissions do not occur at the same time as they did on the source Observable. Optionally takes a SchedulerLike for managing timers.

Example

Emit the most recent click after a burst of clicks

import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

const clicks = fromEvent(document, 'click');
const result = clicks.pipe(debounceTime(1000));
result.subscribe(x => console.log(x));