[RxJS] Transformation operators: debounce and debounceTime

Debounce and debounceTime operators are similar to delayWhen and delay, with the difference that they may drop some emissions. This lesson teaches you how debounce works and where is it useful, for instance when building a type-ahead UI.

 

debounceTime(number): wait for number millionseconds sclience:

var foo = Rx.Observable.interval(100).take(5);

/*
--0--1--2--3--4|
  debounceTime(1000) // delay
------------------------4|
*/

var result = foo.debounceTime(1000);

result.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);

  /*
"next 4"
"done"  
  */

 

var foo = Rx.Observable.interval(100).take(5);

/*
--0--1--2--3--4|
  debounceTime(50) // delay
----0--1--2--3--4|
*/

var result = foo.debounceTime(50);

result.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);

  /*
"next 0"
"next 1"
"next 2"
"next 3"
"next 4"
"done" 
  */

 

debounce( () => Observable): 

var foo = Rx.Observable.interval(100).take(5);

/*
--0--1--2--3--4|
  debounceTime(1000) // delay
------------------------4|
*/

var result = foo.debounce(() =>
  Rx.Observable.interval(1000).take(1)
);

result.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);

  /*
"next 4"
"done"  
  */