How to stop an emited value when another Observable emits?

Question

Having two Observables, one emits a mouseover event (debounced by 500ms) and the other one a mouseout event, I'm looking for a possibility to stop the first Observable (mouseover) from emiting when the second Observable (mouseout) occurs.

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's and Ivan Malagon's suggested solutions work fine if no neighbouring elements. But my row elements do occur within a table. I did write my question kinda interpretable. Applying their code suggestion will unsubscribe/dispose the subscription completely but I do need a solution to stop only current emited value from arriving in subscribe.

However, both answers do solve my question above. ;-) Therefore I accepted Matt Burnell's short answer.

In order to include my additional requirement, I came up with another solution which merges both observable to one, followed by using a debounce time and continue only if the last event is a mouseover event.

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

Answer 3

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>