title: RxJS Observables and a wheel event
body: <p>I was wondering if anyone could help me theorize a solution. I create an Observable from a wheel event, prevent the default action, throttle it by 200ms, map deltaY (which I can use to determine direction), and then I share it. </p>
  
  <p>My problem is that it emits more values than I need creating a situation where my subscribers continue to fire even after the desired action has occurred. I'm new to RxJS so bear with me but... Is there a way for me to take the "first" value emitted in a series of values within say X amount of time passed and not have the observable complete?</p>
  
  <p>Below is the code.</p>
  
  <pre><code>import { fromEvent } from 'rxjs';
  
  const wheel$ = fromEvent(document, 'wheel')
      .pipe(
          tap((event) =&gt; event.preventDefault()),
          // throttleTime(200), /* I have tried throttling and debouncing but that doesn't work - values will continue to be emitted */
          map((event) =&gt; event.deltaY),
          share()
      )
  
   // handles scrolling down //
   wheel$.pipe(filter((val) =&gt; val &gt; 0))
       .subscribe((event) =&gt; {
           if (this.props.isScrolling) return
           this.scrollDown();
       })
  </code></pre>