Cancel observable if another sequence emits

Question

I have two observables, hover$ and unhover$ , triggered on hover and on blur respectively.

The unhover$ has a debounceTime(500) to delay it from being too fast.

Now consider this timeline:

 [    0ms] hover triggered
 [   50ms] unhover 500ms debounce started
 [  100ms] hover triggered
 [  550ms] unhover triggered 

How can I 'cancel' the first unhover$ that is pending, when a new value is emitted by the hover$ sequence?

Answer 1

You can use takeUntil to have your observable be unsubscribed if a notifier Observable emits a value.

Something like this:

unhover$
.debounceTime(500)
.switchMap(evt => Rx.Observable.of(evt)
  .takeUntil(hover$)
)
.subscribe(console.log);