title: How can I use RxJS to generate a requestAnimationFrame loop?
body: <p>My goal is to create an animation loop à la <code>requestAnimationFrame</code> so that I could do something like this:</p>
  
  <pre><code>animationObservable.subscribe(() =&gt;
  {
      // drawing code here
  });
  </code></pre>
  
  <p>I tried this code as a basic test:</p>
  
  <pre><code>let x = 0;
  
  Rx.Observable
      .of(0)
      .repeat(Rx.Scheduler.animationFrame)
      .takeUntil(Rx.Observable.timer(1000))
      .subscribe(() =&gt; console.log(x++));
  </code></pre>
  
  <p><a href="https://jsfiddle.net/kendfrey/feb9tqar/" rel="noreferrer">Here is a JSFiddle but I'm not liable for any browser crashes from running this.</a></p>
  
  <p>I expected this to log the numbers from 0 to approximately 60 (because that is my monitor's refresh rate) over 1 second. Instead, it rapidly logs numbers (much faster than <code>requestAnimationFrame</code> would), begins to cause the page to lag, and finally overflows the stack around 10000 and several seconds later.</p>
  
  <p>Why does the <code>animationFrame</code> scheduler behave this way, and what is the correct way to run an animation loop with RxJS?</p>