[Dúvida] Codigo JS parando quando a aba do navegador sai de foco | Front-end

Estou fazendo um projeto que possui um cronômetro, porem o mesmo pausa automaticamente quando troco de aba no navegador ou dou alt tab?como faço para que isso não aconteça?

codigo abaixo:

const minutesEl = document.querySelector("#minutes");
const secondsEl = document.querySelector("#seconds");
const startBtn = document.querySelector("#startBtn");
const pauseBtn = document.querySelector("#pauseBtn");
const resumeBtn = document.querySelector("#resumeBtn");
const resetBtn = document.querySelector("#resetBtn");
const studyMsg = document.querySelector("#studyMsg");
var hasStudied = false;
var isCounting = false;

let interval;
let minutes = 0;
let seconds = 0;
let milliseconds = 0;
let isPaused = false;

startBtn.addEventListener("click", startTimer);
pauseBtn.addEventListener("click", pauseTimer);
resumeBtn.addEventListener("click", resumeTimer);
resetBtn.addEventListener("click", resetTimer);

function startTimer(){
    interval = setInterval(() =>{

        if(minutes <= 29 && seconds <=59 && !hasStudied){
            studyMsg.textContent = "Estude até o minuto 30!"
          
        }
        else{
            studyMsg.textContent = "Agora você pode descansar por 5 minutos!"
        }

        if(minutes == 30 && !hasStudied){
            clearInterval(interval);
            minutes = 0;
            seconds = 0;
            minutesEl.textContent = "00";
            secondsEl.textContent = "00";
            startBtn.style.display = "block";
            pauseBtn.style.display = "none";
            resumeBtn.style.display = "none";
            hasStudied = true;
        }

        if(hasStudied == true){
            if(minutes == 5){
                clearInterval(interval);
                minutes = 0;
                seconds = 0;
                minutesEl.textContent = "00";
                secondsEl.textContent = "00";
                startBtn.style.display = "block";
                pauseBtn.style.display = "none";
                resumeBtn.style.display = "none";
                hasStudied = false;
            }
        }

        if(!isPaused){
            milliseconds += 10;

        if(milliseconds === 1000){
                seconds++;
                milliseconds = 0;
        }

        if(seconds === 60){
            minutes++;
            seconds = 0;
        }    

        minutesEl.textContent = FormatTimer(minutes);
        secondsEl.textContent = FormatTimer(seconds);

        }

    },10)
    startBtn.style.display = "none";
    pauseBtn.style.display = "block";
    isCounting = true;
}

function pauseTimer(){
    isPaused = true;
    pauseBtn.style.display = "none";
    resumeBtn.style.display = "block";
}

function resumeTimer(){
    isPaused = false;
    resumeBtn.style.display = "none";
    pauseBtn.style.display = "block";
}

function resetTimer(){
    clearInterval(interval);
    minutes = 0;
    seconds = 0;
    minutesEl.textContent = "00";
    secondsEl.textContent = "00";

    startBtn.style.display = "block";
    pauseBtn.style.display = "none";
    resumeBtn.style.display = "none";
}

function FormatTimer(time){
    return time < 10 ? `0${time}` : time;
}
    window.addEventListener("beforeunload", function(event) {
        if(isCounting){
            event.returnValue = "Mensagem de aviso";
        }
    });

Olá Rodrigo! Tudo bem?

Peço desculpa pela demora em respondê-lo.

Pelo código que você compartilhou, percebo que você está usando o evento "beforeunload" para exibir uma mensagem de aviso quando o usuário tenta fechar a aba do navegador enquanto o cronômetro está em execução. No entanto, você não está tratando o evento quando o usuário muda de aba ou dá alt tab.

Uma solução para evitar que o cronômetro pare quando a aba perde o foco é usar o evento "visibilitychange". Esse evento é acionado quando a visibilidade da página é alterada, ou seja, quando o usuário muda de aba ou minimiza a janela do navegador.

Você pode adicionar o seguinte código ao seu script para lidar com esse evento:

document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === "visible") {
    // Ação a ser executada quando a página volta a ficar visível
    resumeTimer();
  } else {
    // Ação a ser executada quando a página fica oculta
    pauseTimer();
  }
});

Dessa forma, quando o usuário mudar de aba ou minimizar a janela do navegador, o cronômetro será pausado automaticamente. E quando o usuário voltar para a aba ou maximizar a janela, o cronômetro será retomado.

Espero que essa solução seja útil para você! Se tiver mais alguma dúvida, estarei à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.