当失去对选项卡/窗口的关注时，SetInterval 未在 Firefox 中运行

Question

I have a setInterval function that do countdown of time.

  startCountDownWorker() {
    this.worker= setInterval(() => {
      this.countDown--;

      // When count timer reach zero
      if (this.countDown === 0) {

        // Clear decrement for count down
        clearInterval(this.worker);
        }
      }
    }, 1000);
  }

The function was tested on Chrome , Firefox , Opera , Safari , its working fine on all except Firefox . When lost focus on Tab/Window on Firefox , the function stopped and only resume when I focus back on the Tab. Any ways to solve this issue ??

Answer 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.