[RxJS] Filtering operators: throttle and throttleTime

Posted 2020-07-17 Answer1215

Debounce is known to be a rate-limiting operator, but it‘s not the only one. This lessons introduces you to throttleTime and throttle, which only drop events (without delaying them) to accomplish rate limiting.

 

 throttleTime(number): first emits, then cause silence

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

/*
--0--1--2--3--4|
  debounceTime(1000) // waits for silence, then emits
  throttleTime(1000) // first emits, then causes silence
--0-----2-----4|
*/

var result = foo.throttleTime(1000);

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

 

throttle( () => Observable): 

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

/*
--0--1--2--3--4|
  throttle( () => Rx.Observalbe.interval(1000).take(1)) // first emits, then causes silence
--0-----2-----4|
*/

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

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

 

Result for both:

/*

"next 0"
"next 2"
"next 4"
"done"

*/