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

Question

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

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

takeUntil 完全符合您的要求。

Answer 2

如果没有相邻元素，Matt Burnell 和 Ivan Malagon 建议的解决方案可以正常工作。但是我的行元素确实出现在表格中。我确实写了我的问题有点可解释。应用他们的代码建议将完全取消订阅/处理订阅，但我确实需要一个解决方案来阻止仅当前发出的值到达订阅。

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

为了满足我的额外要求，我想出了另一种解决方案，它将两个 observable 合并为一个，然后使用去抖动时间，并且仅当最后一个事件是 mouseover 事件时才继续。

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

Answer 3

您可以获取 mouseover 事件的订阅对象，然后在 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>