debounce

debounce operator accept a observable as durationSelector, it ignores emitted values when the time between them is less than time indicated by durationSelector and takes the last emits value in this period.

Example: debounce operator

import { range, of, empty } from 'rxjs';
import { concatMap, delay, debounce } from 'rxjs/operators';

const source$ = range(0, 9).pipe(
  concatMap( i => of(i).pipe(delay( (i%2 + 1) * 1000)))
);
const duration$ = empty().pipe(delay(1500))
const result$ = source$.pipe(debounce(() => duration$));

Example: debounce with click event

click the page to generate events

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

const source$ = fromEvent(document, 'click');
const duration$ = empty().pipe(delay(500))
const result$ = source$.pipe(debounce(() => duration$));

Example: ⚠️

the duration$ observable first emit value indicate the debounce duration.

import { range, of, empty, timer } from 'rxjs';
import { concatMap, delay, debounce, take } from 'rxjs/operators';

const source$ = range(0, 10).pipe(
  concatMap( i => of(i).pipe(delay( (i%2 + 1) * 1000)))
);;

const duration$ = range(0, 3).pipe(
  concatMap( i => of(i).pipe(delay(( (i === 0) ? 1500 : 250 ))))
);
const result$ = source$.pipe(debounce(() => duration$));

Official Doc: rxjs.debounce