RxJS Challenge #19: FPS meter
When I first started using RxJS I was rather scared to write new Observable
. Probably most developers start by combining and manipulating streams and underlying mechanisms of creating new Observables might be obscure to them. Let’s try to dive into Observable constructor to create our own frames-per-second meter!
Breaking down the task
To get our FPS meter we need to go through several steps:
- Turn native
requestAnimationFrame
function toObservable
- Get duration of each frame
- Average out the value over some period of time
RxJS has several way to get intervals emitted based on requestAnimationFrame
but we want to write our own because we are here to learn 🙂
We also don’t want to rely on magically available global methods. Let’s pass them as input to the factory function.
Observable
constructor receives a function that is called on subscription. It must return a TeardownLogic
which could be a function to be called on subscription termination…