title: How do I rate limit requests losslessly using RxJS 5
body: <p>I would like to use make a series of requests to a server, but the server has a hard rate limit of 10 request per second. If I try to make the requests in a loop, it will hit the rate limit since all the requests will happen at the same time.</p>
  
  <pre class="lang-js prettyprint-override"><code>for(let i = 0; i &lt; 20; i++) {
    sendRequest();
  }
  </code></pre>
  
  <p>ReactiveX has lots of tools for modifying observable streams, but I can't seem to find the tools to implement rate limiting. I tried adding a standard delay, but the requests still fire at the same time, just 100ms later than they did previously.</p>
  
  <pre class="lang-js prettyprint-override"><code>const queueRequest$ = new Rx.Subject&lt;number&gt;();
  
  queueRequest$
    .delay(100)
    .subscribe(queueData =&gt; {
      console.log(queueData);
    });
  
  const queueRequest = (id) =&gt; queueRequest$.next(id);
  
  function fire20Requests() {
    for (let i=0; i&lt;20; i++) {
      queueRequest(i);
    }
  }
  
  fire20Requests();
  setTimeout(fire20Requests, 1000);
  setTimeout(fire20Requests, 5000);
  </code></pre>
  
  <p>The <code>debounceTime</code> and <code>throttleTime</code> operators are similar to what I'm looking for as well, but that is lossy instead of lossless. I want to preserve every request that I make, instead of discarding the earlier ones.</p>
  
  <pre class="lang-js prettyprint-override"><code>...
  queueRequest$
    .debounceTime(100)
    .subscribe(queueData =&gt; {
      sendRequest();
    });
  ...
  </code></pre>
  
  <p>How do I make these requests to the server without exceeding the rate limit using ReactiveX and Observables?</p>