【问题标题】:RxJS take first then throttle and waitRxJS 先采取然后节流并等待
【发布时间】:2016-05-19 23:06:04
【问题描述】:

我想使用 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 毫秒,评估 1 并失败,经过 400 毫秒,评估 2 并通过,因为上次发出的值 (0) 和当前接收到的值 (2 ) 是 600 毫秒,而对于我的操作员,它将相对于 1 进行评估,并且经过的时间将为 400 毫秒,因此未通过测试。

而且这个操作符也没有去抖动。它不是等到间隔过去才发出,而是首先发送第一个值,然后根据所有未来值进行评估,依此类推。

这样的运营商已经存在了吗?如果没有,我将如何制作一个?

【问题讨论】:

  • 相信你在找debounce。
  • 不,debounce 在时间间隔之后发送值,我希望之前发送的值然后丢弃所有不超过发送第一个值之后的持续时间的值。
  • 来自文档:在特定时间跨度过去后,从源 Observable 发出一个项目,而 Observable 不会省略任何其他项目。 --OR-- 忽略来自可观察序列的值,该序列后跟在计算的去抖动持续时间内的另一个值。
  • 所以 debounce 将接收一个值,等待持续时间过去,然后转发该值,否则将其丢弃,否则它将忽略在计算持续时间之后发送的值的值。我不想忽略那个值,我想发送第一个值并跳过所有其他没有第 n-1 和第 n 次间隔的值。

标签: javascript ecmascript-6 rxjs backpressure


【解决方案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)})

【讨论】:

    【解决方案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);
    

    【讨论】:

    • 更精致在什么意义上?我看不出有多大区别。我不需要使用skip,因为concat 已经这样做了。除此之外,都是一样的
    猜你喜欢
    • 1970-01-01
    • 2019-12-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-01-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多