Geek Answers Handbook

First RxJS take a throttle and wait

I want to watch an event mousewheelusing RxJS-DOM so that on the first operation I forward this and then delete all the values ​​until the delay between the subsequent values ​​passes the previously set duration.

The statement I represent might look something like this:

Rx.DOM.fromEvent(window, 'mousewheel', (e) => e.deltaY)
.timegate(500 /* ms */)

Imagine the following data stream:

0 - (200 ms) - 1 - (400ms) - 2 - (600ms) - 3

where the value sent is the number, and the time describes how long it takes to get the next value. Since 0 is the first value, it will be emitted, and then all values ​​up to 3 will be discarded, since the individual delays between subsequent values ​​do not exceed 500ms.

Unlike the throttle, the delay time between the values ​​is calculated regardless of whether or not the last received value is emitted. With throttle 0, 200 ms will be sent, 1 will be evaluated and will work, 400 ms will be executed, and 2 will be evaluated as PASS, because the time elapses between the last emitted value (0) and the currently received (2) is 600 ms, while with my operator it will evaluate relative to 1, and the expiration time is 400 ms, so the test fails.

And this operator is also not a failure. Instead of waiting until the interval has expired to emit, it first sends the first value, then evaluates all future values, etc.

Does such an operator already exist? And if not, how can I do this?

+4
2

, timeInterval, . , .

http://jsfiddle.net/a7uusL6t/

var Xms = 500;
var click$ = Rx.Observable.fromEvent(document, 'click').timeInterval()
var firstClick$ = click$.first().map(function(x){return x.value});

var res$ = firstClick$
  .concat(click$
    .filter(function (x) {
      console.log('interval', x.interval);
      return x.interval > Xms;})
    .map(function(x){return x.value})
   );

res$.subscribe(function(x){console.log(x)})
+4

- , , @user3743222 :

const events = Rx.Observable.fromEvent(window, 'mousewheel', (e) => e.deltaY);
const firstEventObservable = events.take(1);
const remainingEventsObservable = events.skip(1)
    .timeInterval()
    .filter(x => x.interval >= this.props.delayDuration)
    .map(x => x.value);
const pageChangeObservable = firstEventObservable.concat(remainingEventsObservable);
+1

More articles:


All Articles