1

2 つの Observable があり、1 つはマウスオーバー イベント (500 ミリ秒でデバウンス) を発行し、もう 1 つはマウスアウト イベントを発行します。

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

3 に答える 3

4

takeUntilあなたが望むことを正確に行います。

于 2016-04-06T13:47:19.427 に答える
2

Matt Burnell と Ivan Malagon が提案した解決策は、隣接する要素がない場合にうまく機能します。しかし、私の行要素はテーブル内にあります。私は自分の質問をちょっと解釈可能に書きました。コードの提案を適用すると、サブスクリプションが完全に登録解除/破棄されますが、現在発行されている値のみがサブスクライブに到達しないようにするソリューションが必要です。

ただし、どちらの回答でも上記の私の質問は解決します。;-) したがって、Matt Burnell の短い回答を受け入れました。

追加の要件を含めるために、両方のオブザーバブルを 1 つにマージし、続いてデバウンス時間を使用して、最後のイベントがマウスオーバー イベントである場合にのみ続行する別のソリューションを考え出しました。

    Observable.fromEvent($('.row'), 'mouseover')
              .merge(mouseOutObservable)
              .debounceTime(500)
              .filter(event => event[ 'type' ] === 'mouseover')
              .subscribe(event => {
                  // ....
              });
于 2016-04-06T12:22:26.340 に答える
1

You can get the subscription object for the mouseover event and then dispose that subscription within the mouseout function.

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>

于 2016-04-06T10:52:06.037 に答える