Setinterval Not Running In Firefox When Lost Focus On Tab/window

I have a setInterval function that do countdown of time. startCountDownWorker() { this.worker= setInterval(() => { this.countDown--; // When count timer reach

Solution 1:

Browsers do apply a threshold to almost all timing functions when the page is blurred, so all these timed-out functions may only execute once in a while.

Not only this, but there is even an incoming Page Lifecycle API that is being drafted and which would add a discarded and a frozen state to the page's visibility, during which your script would not execute at all, until unfrozen.

So the best in your position, to be future proof and since you apparently only need a quite long interval, might be to handle the visibility changes and to record the time at which the page got blurred, then when it's focused back, to update your counter based on the actual elapsed time.

An other even more reliable solution would be to not actually hold an actual countDown value in your counter, but rather to always compute the delta between the starting time of that counter and now. This way, you don't rely on the precision of the browser's timers and you can adjust your timeouts between each tick.