CODEWITHSUNDEEP
javascriptrxjsreactive-programmingrxjs5
Ced
Ced

Reputation: 17397

Debounce Rx.Observable & ignore values emitted in between

jsfiddle

  let sub = new Rx.Subject();
  let val = 0;
  Rx.Observable.fromEvent(window, 'scroll')
  .do(_ => val++)
  .debounceTime(500)
  .subscribe(c => sub.next(val)); 

  sub.subscribe(v => console.log(v));

I have an observable on scroll event. I would like to ignore the values from it unless some time has passed.

it would look like this (e being events, and the debounceTime being 500):

 ---e1----e2----e3----e4----e6-----e7 <- events

 ---n1----------------------n6------- <- notifications

 0--100------------------600------ <- time

And like this:

 ---e1----e2----e3----e4----------------- <- events

 ---n1------------------------------------- <- notifications

 0--100--------------------500------------- <- time

Upvotes: 0

Views: 661

Answers (1)

user663031
user663031

Reputation:

Debouncing and throttling are different. You seem to want throttle.

The fundamental difference is that whereas debouncing reduces n events to one, throttling lets through only one event per time window.

let val = 0;
const sub = Rx.Observable.fromEvent(window, 'scroll')
  .do(_ => val++)
  .throttle(500);

sub.subscribe(v => console.log(v));

However, this is not perfect. The user might scroll within a 500ms window in such a way that you would miss the last scroll. One solution involves combining throttling and debouncing. I'm not sure this is the best idea, though.

By the way, you do not need to subscribe to one observable only to push values from it onto another observable. Just subscribe to the first observable.

Upvotes: 3

Related Questions