RxJS delayed hover

by Santiago J

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/Rx.js"></script>
<p id="trigger">trigger</p>
<p id="popup" style="display: none;">popup</p>

CSS

#trigger {
  background-color: #fff;
}
#popup {
  background-color: #eee;
}
#trigger,
#popup {
  margin: 0;
  padding: 1em;
}

JavaScript

const trigger = document.querySelector('#trigger');
const popup = document.querySelector('#popup');

const { merge, fromEvent, of } = Rx.Observable;
/*
merge(fromEvent(trigger, 'mouseenter').mapTo(true),
      fromEvent(trigger, 'mouseleave').mapTo(false))
	.switchMap(hover => hover ? of(true).delay(500) : of(false))
  .distinctUntilChanged()
  .subscribe(show => { popup.style.display = show ? '' : 'none'; });
*/

merge(merge(fromEvent(trigger, 'mouseenter').mapTo(true),
            fromEvent(trigger, 'mouseleave').mapTo(false)).debounceTime(500),
      fromEvent(trigger, 'mouseleave').mapTo(false))
  .distinctUntilChanged()
  .subscribe(show => { console.log(show); popup.style.display = show ? '' : 'none'; });