RxJS debounce() Filtering Operator

RxJS debounce() operator is a filtering operator that emits a value from the source Observable only after a while (exactly after a particular period). The emission is determined by another input given as Observable or promise. The RxJS debounce() operator is similar to the RxJS debounceTime() operator, but the period of emission silence is determined by a second Observable.

The RxJS debounce() operator delays values emitted by the source Observable, but if it gets a new arrival on the source Observable, it drops previous pending delayed emissions. This RxJS debounce() operator is also used to track the most recent value from the source Observable and spawn a duration Observable by calling the durationSelector function.

The RxJS debounce() operator is similar to RxJS debounceTime() operator, but the time span of emission silence is determined by a second Observable.

Syntax:

Following is the syntax of the debounce() operator:

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

Parameter Explanation

durationSelector: It specifies a function that receives a value from the source Observable which computes the timeout duration for each source value, and later returned as an Observable or a Promise.

Return value

The debounce() operator's return value is observable that delays the source observable emissions by the specified duration observable returned by durationSelector. It can also drop some values if it finds them too frequently.

Let us see some examples of debounce() operator to understand it clearly.

Example 1 (Debounce on timer)

import { of, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
//emit four strings
const example = of('This is the first value', 'This is the second value', 'This is the third value', 'This is the last value');
/*
    Only emit values after a second has passed between the last emission,
    throw away all other values
*/
const debouncedExample = example.pipe(debounce(() => timer(1000)));
/*
    In this example, all values except last will be omitted. 
 It will show only the last value as output. 
*/
const subscribe = debouncedExample.subscribe(val => console.log(val));

Output:

After executing the above example, you will see the following result as array:

In the above example, you can see that it has emitted only the last value.

Example 2 (Debounce at increasing interval)

import { interval, timer } from 'rxjs';
import { debounce } from 'rxjs/operators';
//emit value every 1 second
const interval$ = interval(1000);
//raise the debounce time by 200ms each second
const debouncedInterval = interval$.pipe(debounce(val => timer(val * 200)));
/*
  After 5 seconds, debounce time will be greater than interval time, and no values will be emitted
*/
const subscribe = debouncedInterval.subscribe(val =>
  console.log(`Example Two: ${val}`)
);

Output:

After executing the above example, you will see the following result as an array: