如何在另一个 Observable 发出时停止发出的值？

Question

有两个 Observable，一个发出 mouseover 事件（去抖动 500 毫秒），另一个发出 mouseout 事件，我正在寻找一种可能性来阻止第一个 Observable（mouseover）在第二个 Observable（mouseout）时发出) 发生。

let mouseOutObservable = Observable.fromEvent($('.row'), 'mouseout')

Observable.fromEvent($('.row'), 'mouseover')
          .debounceTime(500)
          // .stopEmitingWhen(mouseOutObservable) --> how? possible?
          .subscribe(event => {
              // show tooltip
              mouseOutObservable.first()
                                .subscribe(() => {
                                   // destroy tooltip
                                });
          });

Answer 1

您可以获得鼠标悬停事件的订阅对象，然后在 mouseout 函数中处理该订阅。

let mouseOutObservable = Rx.Observable.fromEvent($('.row'), 'mouseout')

let mouseOverObservable = Rx.Observable.fromEvent($('.row'), 'mouseover')
          .debounce(500);

let mouseOverObservableSubscription = mouseOverObservable.subscribe(() => { $('#output').append('<p>mouseover</p>'); });
mouseOutObservable.subscribe(() => {
  $('#output').append('<p>mouseout</p>');
  mouseOverObservableSubscription.dispose();
})

.row {
  min-height: 48px;
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>

<div class="row">Mouse over me!</div>

<div id="output"></div>

Answer 2

Matt Burnell 和 Ivan Malagon 建议的解决方案在没有相邻元素的情况下工作正常。但是我的行元素确实出现在 table 内。我确实写了我的问题 kinda interpretable。应用他们的代码建议将 unsubscribe/dispose 完全订阅，但我确实需要一个解决方案来阻止只有当前发出的值到达订阅。

然而，这两个答案确实解决了我上面的问题。 ;-) 因此我接受了 Matt Burnell 的简短回答。

为了满足我的额外要求，我提出了另一种解决方案，将两个可观察到的合并为一个，然后使用去抖动时间，仅当最后一个事件是鼠标悬停事件时才继续。

    Observable.fromEvent($('.row'), 'mouseover')
              .merge(mouseOutObservable)
              .debounceTime(500)
              .filter(event => event[ 'type' ] === 'mouseover')
              .subscribe(event => {
                  // ....
              });

Answer 3

takeUntil 做你想做的。

如何在另一个 Observable 发出时停止发出的值？

How to stop an emited value when another Observable emits?

javascript

reactive-programming

rxjs

typescript

rxjs5