JavaScript | método clearTimeout() y clearInterval()

Requisito previo: setTimeout() y setInterval()

clearTimeout()
La función clearTimeout() en javascript borra el tiempo de espera establecido por la función setTimeout() antes de eso.

  • La función setTimeout() toma dos parámetros. Primero una función a ejecutar y segundo después de cuánto tiempo (en ms).
  • setTimeout() ejecuta la función pasada después de un tiempo determinado. El valor de identificación del número devuelto por la función setTimeout() se almacena en una variable y se pasa a la función clearTimeout() para borrar el temporizador.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Windows clearTimeout() method
    </title>
</head>
  
<body>
  
    <button id="btn" onclick="fun()" style="color: blue;">
        GeeksForGeeks</button>
    <button id="btn" onclick="stop()">Stop</button>
    <script>
        var t;
  
        function color() {
            if (document.getElementById('btn').style.color == 'blue') {
                document.getElementById('btn').style.color = 'green';
            } else {
                document.getElementById('btn').style.color = 'blue';
            }
  
        }
  
        function fun() {
            t = setTimeout(color, 3000);
  
        }
  
        function stop() {
            clearTimeout(t);
        }
    </script>
</body>
  
</html>


Explicación:
el color del botón GeeksForGeeks cambia después de 3 segundos solo una vez. Haga clic en Detener antes de 3 segundos después de hacer clic en el botón GeeksForGeeks para borrar el tiempo de espera.

clearInterval()
La función clearInterval() en javascript borra el intervalo que ha sido establecido por la función setInterval() antes de eso.

  • La función setInterval() toma dos parámetros. Primero una función a ejecutar y segundo después de cuánto tiempo (en ms).
  • setInterval() ejecuta la función pasada para el intervalo de tiempo dado. El valor de identificación del número devuelto por la función setInterval() se almacena en una variable y se pasa a la función clearInterval() para borrar el intervalo.

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Windows clearInterval() method
    </title>
</head>
  
<body>
    <button id="btn" onclick="fun()" style="color: blue;">
        GeeksForGeeks</button>
    <button id="btn" onclick="stop()">Stop</button>
    <script>
        var t;
  
        function color() {
            if (document.getElementById('btn').style.color == 'blue') {
                document.getElementById('btn').style.color = 'green';
            } else {
                document.getElementById('btn').style.color = 'blue';
            }
  
        }
  
        function fun() {
            t = setInterval(color, 3000);
  
        }
  
        function stop() {
            clearInterval(t);
        }
    </script>
</body>
  
</html>


Explicación:
En este ejemplo, el color de GeeksForGeeks cambia y permanece igual cada 3 segundos, luego cambia nuevamente. Haga clic en Detener para borrar el intervalo.

Navegador compatible: los navegadores compatibles con el método clearTimeout() y clearInterval() se enumeran a continuación:

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Ópera 4.0
  • Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Kartikaybhutani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *