RXjs 从源中取消去抖动

Question

我正在学习 Rx，所以我不太了解 Rx 的一些机制，我想做的事情可以通过回调轻松完成，但我想了解 Rx。

所以我想做的是，在事件 500ms 上消除鼠标抖动并显示一个 ui 界面，并在鼠标移出时隐藏该界面，所以我有以下代码：

var outStream = Rx.Observable.fromEventPattern(
          function add (h) {
            asset.events.onInputOut.add(function(){
                h('out');
            });
          }
        );

        var overStream = Rx.Observable.fromEventPattern(
          function add (h) {
            asset.events.onInputOver.add(function(e){
                h('over');
            });
          }
        ).debounce(500);


        var source = Rx.Observable.merge(overStream, outStream);

        source.subscribe(function (x) {
            console.log(x);
          });

我想要的是这样的：

.
.mouse over fired after 500ms
.mouseout
.
.mouse over
.mouse out fired before 500ms trigger cancel mouse over

我需要一些指示，提前谢谢。

Answer 1

我会使用这样的东西：

var hoverStream = overStream.flatMapLatest(function() {
  return Rx.Observable.timer(500).takeUntil(outStream).map(function() { return 'hover'; })
});

这表示“将每个 overStream 元素映射到一个 observable 中，该 observable 将在 500 毫秒后产生一个元素，但如果 outStream 在它到达之前产生一个元素，则停止侦听”。要使其正常工作，您需要从 overStream 中删除 debounce（并将其保留为所有此类事件的简单流）。

然后您可以将这些值合并到您想要的任何结果流中。