Listado completo de tutoriales

Funciones setInterval, clearInterval, setTimeout y clearTimeout

La función setTimeout y setInterval permiten pasar como primer parámetro el nombre de una función que se ejecutará después de una determinada cantidad de milisegundos que le pasamos en el segundo parámetro. La única diferencia entre estas funciones es que si llamamos a setInterval la función se ejecutará en forma repetida cada vez que pase dicha cantidad de milisegundos, en cambio con setTimeout solo llamará la función una única vez.

Estas dos funciones retornan un valor que será de utilidad si necesitamos eliminar la llamada a la función.

Problema Mostrar un cronómetro que comience en cero y se incremente en uno cada vez que pase un segundo. Disponer un botón para poder detener o reiniciar el cronómetro.

<!DOCTYPE html>
<html>

<head>
    <title>Ejemplo de JavaScript</title>
    <meta charset="UTF-8">
    <style>
        #cronometro {
            font-size: 50px;
            color: #0a0;
        }
    </style>
</head>

<body>

    <span id="cronometro">0</span>
    <br>
    <input type="button" id="boton1" value="detener">

    <script>
        let reloj;
        reloj = setInterval(procesar, 1000);
        document.getElementById('boton1').addEventListener('click', presionBoton);

        function procesar() {
            let nro = parseInt(document.getElementById('cronometro').innerHTML);
            nro++;
            document.getElementById('cronometro').innerHTML = nro;
        }

        function presionBoton() {
            if (document.getElementById('boton1').value == 'detener') {
                clearInterval(reloj);
                document.getElementById('boton1').value = 'continuar';
            } else {
                reloj = setInterval(procesar, 1000);
                document.getElementById('boton1').value = 'detener';
            }
        }
    </script>

</body>

</html>

Definimos una variable global que guarde la referencia del timer, registramos la función que debe ejecutarse cada un segundo (1000 milisegundos):

        let reloj;
        reloj = setInterval(procesar, 1000);

La función procesar se ejecuta cada un segundo, siempre y cuando se haya registrado esta función llamando a setInterval. El objetivo de esta función es extraer el valor del cronómetro, incrementarlo en uno y actualizarlo:

        function procesar() {
            let nro = parseInt(document.getElementById('cronometro').innerHTML);
            nro++;
            document.getElementById('cronometro').innerHTML = nro;
        }

La función presionBoton se ejecuta cada vez que lo presionamos y lo que hacemos es controlar la etiqueta del botón para ver si dice 'detener' con lo que llamando a la función clearInterval esto hace que se suprime la ejecución continua de la función procesar. Por el falso del if procedemos a registrar nuevamente la función procesar:

        function presionBoton() {
            if (document.getElementById('boton1').value == 'detener') {
                clearInterval(reloj);
                document.getElementById('boton1').value = 'continuar';
            } else {
                reloj = setInterval(procesar, 1000);
                document.getElementById('boton1').value = 'detener';
            }
        }

Retornar