title: RxJS - debounce event after throttle?
body: <p>I let a user scroll a page and in every scroll event - I'm checking if there's a new items in the viewport<br>
  ( <em>if there are , I do some operation on those new items - irrelevant for now</em>).</p>
  
  <p>So I have something like this : </p>
  
  <pre><code> const observable = Rx.Observable.fromEvent(window, 'scroll');
  
    const subscriber = observable.throttleTime(300 /* ms */).subscribe(
            (x) =&gt; {
              console.log('Next: event!');
            },
            (err) =&gt; {
              console.log('Error: %s', err);
            },
            () =&gt; {
              console.log('Completed');
            });
  </code></pre>
  
  <p>This code is working as expected  and I do see a message after each 300 ms.</p>
  
  <p>But there's a problem. A user might scroll while not completing the 300 ms ( <em>event won't be raised</em>) and a new item got visible while scrolling.</p>
  
  <p>This is where I need the <code>debounce</code> method.  (<em>which means "after  X ms of last event time - raise an event"</em>)</p>
  
  <p>Which is exactly what I need.</p>
  
  <p><a href="https://plnkr.co/edit/KjNyXdVTL5IsEmMMm1lj?p=preview" rel="noreferrer">I've tried this</a>  : </p>
  
  <pre><code> const subscriber = observable.throttleTime(300 /* ms */).debounceTime(350)....
  </code></pre>
  
  <p>But I only see the debounced events.</p>
  
  <p><strong>Question</strong></p>
  
  <p>How can I use throttle and at the end of a throttle -  attach a debounce ?</p>