我希望使用RxJS-DOM观察mousewheel
事件,以便在第一个事件触发时,我将其转发然后删除任何和所有值,直到后续值之间的延迟超过先前指定的持续时间。 / p>
我想象的运营商可能看起来像:
Rx.DOM.fromEvent(window, 'mousewheel', (e) => e.deltaY)
.timegate(500 /* ms */)
想象一下以下数据流:
0 - (200 ms) - 1 - (400ms) - 2 - (600ms) - 3
其中发送的值是数字,时间描述下一个值到达的时间。由于0是第一个值,它将被发射,然后所有值都将被删除,因为后续值之间的各个延迟不大于500ms
。
与节流阀不同,计算值之间的时间延迟,无论是否发出最后一个接收值。使用油门,0将被发送,200 ms将被过去,1将被评估并失败,400 ms将被过去,2将被评估和PASS,因为最后一个发射值(0)和当前接收的值之间经过的时间(2 )是600毫秒,而对于我的操作员,它将相对于1进行评估,并且经过的时间将是400毫秒,因此测试失败。
这个运营商也没有去抖动。它不是等待间隔过去才发出,而是先发送第一个值,然后根据所有未来值进行评估,依此类推。
这样的运营商是否已经存在?如果没有,我将如何制作一个?
答案 0 :(得分:4)
您可以使用timeInterval
运算符相对容易地实现此目的,该运算符精确计算连续值之间的时间间隔。这是一个示例代码,您可以适应您的伪装。
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)})
答案 1 :(得分:1)
我用类似的东西解决了我的问题,但比@ 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);