0

I have a problem. I have a script that decreases the width of an element for 15 seconds. The script works normally, however when switching to another browser tab, the script pauses its execution, and only resumes when I return to the script tab again. I looked all over the internet and I couldn't find anything that could solve this problem. I want the user to be able to visit other tabs and for the script to continue decreasing the width of the file, based on the seconds that have been configured. does anyone know if it's possible?

I looked all over the internet for a solution and I couldn't find it.

my code

var contagemInicial = document.querySelector('.seconds'),
    life = document.querySelector('.life'),
    time = contagemInicial.textContent,
    [segundos, centesimos] = time.split(":")

var contagem = setInterval(() =>{

    
//life.classList.add('animar')

if (centesimos == 00) {
    centesimos = 60
    segundos--
    life.style.width = (segundos / 15 * 100) + '%'
    life.style.transition = 'linear 1.2s'
} else {
    centesimos--
    if (centesimos < 10) {
        centesimos = '0'+centesimos
    }
}
if (segundos == 0 && centesimos == 00) {
    clearInterval(contagem)
}
    contagemInicial.textContent = segundos+':'+centesimos
}, 14)
Cristian Mota
  • 11
  • 1

1 Answers1

0

It's because optimization. Inactive pages have lower priority. You can work around this by calculating elapsed time between each update (recommended way) or use web workers since they not affected by this "issue". You can read more about this here, there are some great answers.

Zoltán Császár
  • 11
  • 1
  • 2