Timer only repeats and continues if you're on the page
suhjohn opened this issue · 3 comments
Is this the intended design of the timer? Ideally, even if the user navigates to a different tab, I would want the timer to repeat in the background.
Hey @suhjohn, this is how the browser works. When you navigate away to a different tab the browser will suspend all animations that run in the background or none active tabs to safe some CPU for something that the user does not use at the moment. Once you come back to the tab the browser will continue from where it was left off.
What happens here, in the case of use-elapsed-time, the library is using internally requestAnimationFrame to measure the elapsed time. Once you move away from the tab the browsers stop the execution of the requestAnimationFrame, when you come back to the tab, the browser continues where you left but we measure how much time passed since then. This is very important, the time still continues, regardless of the active tab. When that happens, the library checks that more time has passed then it should have counted and then moves to the onComplete callback.
Does this make sense?
Got it. I was originally using redux for state management to trigger preset timers to go off one after another, but I wanted to try to leverage this library for the time management + UI rendering. I guess I'll have to build my own timer. Thank you though!
Sure, good luck! Let me know how you achieve it if you decide to open source it.