Reimplemented timer using requestAnimationFrame

[twinkelmann]

What it does

To fix #32, this PR implements the timer using the requestAnimationFrame API.

Benefits

• High precision clock time since page load is used instead of system time (Date API)
• Low latency (~20ms no matter the timer total run time)
• In case of throttling, no seconds will be lost. No delay can accumulate over ~200ms

Notes

if there is more than a second of throttling, more than 1 second can be added at once to the timer.
Currently in the PR, the timer-advanced event is only fired once (essentially "skipping seconds" from the perspective of someone listening to the event).
However, it can easily be implemented to fire an event for each passed seconds (all those events would fire at once).

Why setTimeout is not the way to go: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
Credits to #41 (comment) for the tip.

[miloslavnosek]

Does this solution help when the application is minimized?

[twinkelmann]

Does this solution help when the application is minimized?

I haven't checked myself.
If someone has an efficient way to test the different implementations, that would be of great help :)

[miloslavnosek]

Did some testing on your branch and timer works fine even when the app is minimized except the app doesn't transition from work to short break until I un-minize it but that probably has nothing to do with this PR.

[twinkelmann]

Did some testing on your branch and timer works fine even when the app is minimized except the app doesn't transition from work to short break until I un-minize it but that probably has nothing to do with this PR.

No it might actually. I just realized that the callback for requestAnimationFrame is probably not called when the app is minimized.
Which is fine because it catches up next time it is called, but if the timer should have ended while minimized, the final call to end the timer doesn't happen until you reveal the app.

Crap, so this implementation won't do it in the end.

[Splode]

The timer has been implemented using a web worker with #68 to address #32