SetInterval not running in Firefox when lost focus on tab/window

98
January 10, 2020, at 3:30 PM

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.

READ ALSO
React component not reloading on history.push

React component not reloading on history.push

I have an app with routes defined as follows:

109
face recognition application [closed]

face recognition application [closed]

Want to improve this question? Update the question so it focuses on one problem only by editing this post

102
Why behavior is different?

Why behavior is different?

What's the difference between createRef and ref={(c) => thisel = c}?

95
Are there any creative workarounds to get the browser to play audio on an inactive mobile device?

Are there any creative workarounds to get the browser to play audio on an inactive mobile device?

I built a gamified Pomodoro/Todo web app on React, and realized near the finishing stages of production that the audio won't fire if the phone isn't active (I know, rookie mistake)I searched here and confirmed what I feared to be true

82