W3cubDocs

/RxJS

debounce

function stable

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

`debounce<T>(durationSelector: (value: T) => SubscribableOrPromise<any>): MonoTypeOperatorFunction<T>`

Parameters

durationSelector

A function that receives a value from the source Observable, for computing the timeout duration for each source value, returned as an Observable or a Promise.

Returns

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

Description

It's like debounceTime, but the time span of emission silence is determined by a second Observable.

debounce marble diagram

debounce 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 spawns a duration Observable by calling the durationSelector function. The value is emitted only when the duration Observable emits a value or completes, and if no other value was emitted on the source Observable since the duration Observable was spawned. If a new value appears before the duration Observable emits, the previous value will be dropped and will not be emitted on the output Observable.

Like debounceTime, this is a rate-limiting operator, and also a delay-like operator since output emissions do not necessarily occur at the same time as they did on the source Observable.

Example

Emit the most recent click after a burst of clicks

import { fromEvent, interval } from 'rxjs';
import { debounce } from 'rxjs/operators';

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