title: Regular observable emission while DOM hovering
body: <p>Problem: looking for a way to get a regular event emission (saying every 200ms) while the user hovering a DOM element with RxJs on angular 5.</p>
  
  <p>Actually, using <code>mouseover</code> via simple JS, angular or RxJs doesn't produce a regular event and the behavior differs from browsers. Using <code>debounce</code> doesn't help about event emission.</p>
  
  <p>So, I thought instead using <code>mouseenter</code> and <code>mouseleave</code> events and a timer between them. But I have no idea how to start and stop a timer from events.</p>
  
  <p>Something like <a href="https://stackoverflow.com/a/3966307/7457567">this solution in JQuery</a>, but with observables.</p>
  
  <p>A (bad) code is better than 1000 words:</p>
  
  <pre class="lang-js prettyprint-override"><code>// RxJs syntax in typescript for angular
  const enter = fromEvent(nativeElement, "mouseenter");
  const leave = fromEvent(nativeElement, "mouseleave");
  
  // Bad code, just an idea
  enter.pipe(
    merge(interval(200 /* ms */)),
    takeUntil(leave)
  ).subscribe(event =&gt; console.log("hovering", event));
  </code></pre>
  
  <p>Do you know if it is possible to start an interval emission after each <code>mouseenter</code>?</p>
  
  <p>For libraries, I'm using <strong>RxJs 5</strong> with Angular 5 on typescript 2.5.</p>