title: RxJs limit amount of subscribe calls
body: <p>I listen to ResizeObserver (or rather, a <a href="https://www.npmjs.com/package/resize-observer-polyfill" rel="nofollow noreferrer">polyfill</a>) to trigger the redrawing of a <a href="http://fabricjs.com/" rel="nofollow noreferrer">fabricjs</a> canvas, which is quite resource-heavy. Therefore, I want to limit the amount of redraws that are triggered by the resize event.</p>
  
  <p>I tried implementing this functionlity with RxJs:</p>
  
  <ol>
  <li>Redraw gets triggered immediately (first time)</li>
  <li>Redraw does not get triggered for n milliseconds</li>
  <li>Redraw does get triggered after n millisceonds</li>
  <li>Redraw does get triggered for last resize event</li>
  </ol>
  
  <p>RxJs offers some <a href="https://www.learnrxjs.io/concepts/time-based-operators-comparison.html" rel="nofollow noreferrer">built-in time-based operators</a>. However, they all have their flaws:</p>
  
  <ul>
  <li><a href="https://www.learnrxjs.io/operators/filtering/audittime.html" rel="nofollow noreferrer">auditTime</a>: Has an initial delay</li>
  <li><a href="https://www.learnrxjs.io/operators/filtering/debouncetime.html" rel="nofollow noreferrer">debounceTime</a>: Initial delay and never triggers when you keep resizing</li>
  <li><a href="https://www.learnrxjs.io/operators/filtering/throttletime.html" rel="nofollow noreferrer">throttleTime</a>: Might ignore the last few events, which are crucial</li>
  </ul>
  
  <p>I tried merging/joining these operators but this led to double-calling after n seconds and other problems. Is there a simple RxJs way to do this? I imagine it could be possible by starting/clearing a time-out function.</p>