Dlaczego ten stoper nie działa w tle?

pytanie zadane 23 marca 2020 w JavaScript przez Grzegorz Mikina Dyskutant (8,060 p.)

Gdy zmieniam kartę przeglądarki stoper przestaje być aktywny i przestaje działać, czy da się to jakoś obejść np. żeby nawet gdy karta jest zminimalizowana stoper w dalszym ciągu działał?
To jest tylko zwykły stoper, w przyszłości chcę aby był częścią większego projektu i np. po otwarciu był zatrzymany w danym momencie i mierzył upływ czasu nad czymś, ale to w przyszłości. Czy da się to jakoś zapisać żeby nie stopował przy nieaktywnym oknie przeglądarki? Tylko wystarczającym powodem do jego działania jest to że został włączony i że okno jest otwarte (może być zminimalizowane, może być inna karta, ale tam odgrywa się jakaś akcja)
Tutaj kod:

<!-- Stoper-->
<!-- Program odmierza czas -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Stoper</title>
</head>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .time {
    position: absolute;
    width: 100vw;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 60px;
    text-align: center;
    font-family: monospace;
  }

  button {
    font-size: 44px;
    margin: 30px;
    padding: 0 10px;
  }
</style>

<body>
  <button class="main">Start</button>
  <button class="reset">Reset</button>
  <div class="time">
    <p>Czas od startu:</p>
    <div>---</div>
  </div>
</body>
<script src="js/main.js"></script>

</html>

js/main.js

//Stoper
// alert('To działa!');

const btnTime = document.querySelector('.main');
const btnReset = document.querySelector('.reset');
const panel = document.querySelector('.time div');

let time = 0; //setne sekundy
let active = false
let idI; //zmienna przechowująca setInterval

const timer = () => {
    if (!active) {
        active = !active
        btnTime.textContent = 'Pauza';
        idI = setInterval(start, 10); //identyfikator funkcji setInterval podaje jej unikalne id 
    } else {
        active = !active
        btnTime.textContent = 'Start';
        clearInterval(idI)
    }
}

const start = () => {
    time++
    panel.textContent = (time / 100).toFixed(2);
}

const reset = () => {
    time = 0;
    panel.textContent = '---'
    active = !active
    btnTime.textContent = 'Start';
    clearInterval(idI)

}

btnTime.addEventListener('click', timer);
btnReset.addEventListener('click', reset);

2 odpowiedzi

odpowiedź 24 marca 2020 przez DawidK Nałogowiec (37,910 p.)

odpowiedź 23 marca 2020 przez Grzegorz Mikina Dyskutant (8,060 p.)

Załóżmy siadam rano do pracy i kończę ją po ośmiu godzinach, pracuję nad danym klientem, po skończonym zadaniu wyświetla mi się popup do pobrania. Potrzebuję przeliczenia na roboczo godzinę x kwota brutto za h pracy