Question

有两个Observable，一个发出mouseover事件（去抖动500ms），另一个发出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合并为一个，然后使用去抖时间，并且仅在最后一个事件是鼠标悬停事件时继续。 < / p>

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

Answer 3

您可以获取mouseover事件的订阅对象，然后在mouseout函数中处理该订阅。

＆＃13;

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();
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: