RxJS首先取得油門然后等待

Question

我想使用RxJS-DOM觀察mousewheel輪事件，以便在第一個事件觸發時，我將其轉發然后刪除任何和所有值，直到后續值之間的延遲超過先前指定的持續時間。

我想象的運算符可能看起來像：

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

想象一下以下數據流：

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

其中發送的值是數字，時間描述下一個值到達的時間。 由於0是第一個值，它將被發射，然后直到3的所有值都將被丟棄，因為后續值之間的各個延遲不大於500ms 。

與節流閥不同，計算值之間的時間延遲，無論是否發出最后接收的值。 使用油門，0將被發送，200 ms將被過去，1將被評估並失敗，400 ms將被過去，2將被評估和PASS，因為最后一個發射值（0）和當前接收的值之間經過的時間（2 ）是600毫秒，而對於我的操作員，它將相對於1進行評估，並且經過的時間將是400毫秒，因此測試失敗。

而且這個運營商也沒有去抖動。 它不是等待間隔過去才發出，而是先發送第一個值，然后根據所有未來值進行評估，依此類推。

像這樣的運營商是否已經存在？ 如果沒有，我將如何制作一個？

Answer 1

您可以使用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)})

Answer 2

我用類似的東西解決了我的問題，但比@ 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);