Problem with javascript timer when I minimize the browser window

Question

Problem with javascript timer when I minimize the browser window

Navigation

#1 by (1 votes)

0

This is my code to create a stopwatch, it works fine, the only problem that presents me is that when I minimize the browser (any browser), the chronometer does not keep counting time.

If I re-maximize the browser again, count the time.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css.css">
    <title></title>
</head>
<body>
    <div id="contenedor">
        <div class="reloj" id="Horas">00</div>
        <div class="reloj" id="Minutos">:00</div>
        <div class="reloj" id="Segundos">:00</div>
        <div class="reloj" id="Centesimas">:00</div>
        <input type="button" class="boton" id="inicio" value="Start &#9658;" onclick="inicio();">
        <input type="button" class="boton" id="parar" value="Stop &#8718;" onclick="parar();" disabled>
        <input type="button" class="boton" id="continuar" value="Resume &#8634;" onclick="inicio();" disabled>
        <!-- <input type="button" class="boton" id="reinicio" value="Reset &#8635;" onclick="reinicio();" disabled> -->
    </div>

<script type="text/javascript">
    var centesimas = 0;
    var segundos = 0;
    var minutos = 0;
    var horas = 0;
    function inicio () {
        control = setInterval(cronometro,10);
        document.getElementById("inicio").disabled = true;
        document.getElementById("parar").disabled = false;
        document.getElementById("continuar").disabled = true;
        document.getElementById("reinicio").disabled = false;
    }
    function parar () {
        clearInterval(control);
        document.getElementById("parar").disabled = true;
        document.getElementById("continuar").disabled = false;
    }
    function reinicio () {
        clearInterval(control);
        centesimas = 0;
        segundos = 0;
        minutos = 0;
        horas = 0;
        Centesimas.innerHTML = ":00";
        Segundos.innerHTML = ":00";
        Minutos.innerHTML = ":00";
        Horas.innerHTML = "00";
        document.getElementById("inicio").disabled = false;
        document.getElementById("parar").disabled = true;
        document.getElementById("continuar").disabled = true;
        document.getElementById("reinicio").disabled = true;
    }
    function cronometro () {
        if (centesimas < 99) {
            centesimas++;
            if (centesimas < 10) { centesimas = "0"+centesimas }
            Centesimas.innerHTML = ":"+centesimas;
        }
        if (centesimas == 99) {
            centesimas = -1;
        }
        if (centesimas == 0) {
            segundos ++;
            if (segundos < 10) { segundos = "0"+segundos }
            Segundos.innerHTML = ":"+segundos;
        }
        if (segundos == 59) {
            segundos = -1;
        }
        if ( (centesimas == 0)&&(segundos == 0) ) {
            minutos++;
            if (minutos < 10) { minutos = "0"+minutos }
            Minutos.innerHTML = ":"+minutos;
        }
        if (minutos == 59) {
            minutos = -1;
        }
        if ( (centesimas == 0)&&(segundos == 0)&&(minutos == 0) ) {
            horas ++;
            if (horas < 10) { horas = "0"+horas }
            Horas.innerHTML = horas;
        }
    }
</script>

</body>
</html>

javascript html5

asked by Jassan 13.12.2018 в 18:17

source

1 answer

Display an alert in a TableViewCell Activate file submit with another button

score 1 · Accepted Answer

It seems that some browsers (like Google Chrome) change their behavior when they are running in the background (like being minimized) and only allow timeOuts not less than 1,000 milliseconds. So you can either change the value of the variable control in the function inicio() , like this:

control = setInterval(cronometro,1000);

... with which you would lose the functionality of values less than 1 second, or use Web Workers

Here's a link that explains to me how clearer web workers work, as for that you can more easily adapt the code of this example to your chronometer.