RXjs 取消来自源的反跳

Question

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

所以我想做的是，将鼠标悬停在事件上 500 毫秒并显示 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'; })
});

这表示 "map each overStream element into an observable that will yield a single element after 500ms, but stop listening if outStream yields an element before it arrives"。为了使其正常工作，您需要从 overStream 中删除 debounce（并将其保留为所有此类事件的简单流）。

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

RXjs 取消来自源的反跳

RXjs canceling debounce from source

javascript

rxjs

rxjs5