2

我正在学习 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

我需要一些方向，提前谢谢。

4

1 回答 1

7

我会使用这样的东西：

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

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

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

于 2016-04-09T23:06:02.240 回答