Los eventos de tiempo son los eventos que ayudan a ejecutar una pieza de código en un intervalo de tiempo específico. Estos eventos están directamente disponibles en el objeto Ventana HTML DOM (Modelo de objetos de documento), es decir, están presentes en el navegador. Por lo tanto, estos se denominan métodos globales y se pueden invocar a través del objeto ‘ventana’ o sin él. Los diversos eventos de tiempo se enumeran a continuación:
Método setTimeout() : este método se utiliza para ejecutar un fragmento de código después de un cierto período de tiempo. La mayoría de las veces, esta pieza de código se escribe dentro de una función. La función se pasa como parámetro o como función anónima directamente como parámetro. Devuelve un entero positivo que representa el ID del temporizador creado debido a la llamada del método setTimeout. Es opcional usar una variable para almacenar la ID, pero depende de los casos en los que queramos cancelar el temporizador usando el método clearTimeout() .
La función pasada se ejecuta después de que el temporizador se detiene. Los parámetros pasados (especificados después del tiempo de retardo) son opcionales y están accesibles para esta función . El retraso es el tiempo que el temporizador tiene que esperar para la ejecución de la función. Está escrito en milisegundos, por lo que ‘1000’ representa ‘1’ segundo.
Sintaxis:
let timeoutID = scope.setTimeout(function, delay, param1, param2, ...)
El siguiente ejemplo demuestra el método setTimeout():
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:#378E47;">
GeeksforGeeks
</h1>
<h2>setTimeout() method</h2>
<p>Click the button and wait for 3 seconds.</p>
<!-- Setting the onclick method for the button -->
<button onclick="setTimeout(geeksforgeeks, 3000);">
Press me
</button>
<h2 style="font-size:3em;color:#378E47;"></h2>
<script>
function geeksforgeeks() {
// Fetching the first index h2 element
var h2Heading =
document.getElementsByTagName("h2")[1];
// Changing the innerHTML tag of the
// fetched h2 heading
h2Heading.innerHTML = "Welcome here!";
}
</script>
</body>
</html>
Producción:
Método clearTimeout() : El método ‘clearTimeout()’ se utiliza para cancelar un tiempo de espera establecido mediante el método setTimeout() . Este método detiene la ejecución de la función pasada como parámetro si se llama dentro del tiempo de retardo especificado en el método setTimeout().
Acepta un solo parámetro que es el timoutID que devuelve el método setTimeout() . Una ID no válida pasada a este método no hará nada.
Sintaxis:
scope.clearTimeout(timeoutID)
El siguiente ejemplo demuestra el método clearTimeout():
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body style="margin-left:50px;">
<h1 style="color:#378E47;">
GeeksforGeeks!
</h1>
<h2>clearTimeout() method</h2>
<p>Press the first button and wait 4 seconds.</p>
<p>
Press the second button before 4 seconds to
prevent the first button to execute.
</p>
<button style="margin-right:10px"
onclick="startFunction()">Press me
</button>
<button onclick="stopFunction()">Stop</button>
<h1 style="font-size:3em; color: #378E47;"></h1>
<!-- Javascript Code -->
<script>
var setTimeoutID;
function startFunction() {
setTimeoutID = setTimeout(function () {
// Fetching the first indexed h1 element
var h2Heading =
document.getElementsByTagName("h1")[1];
// Changing the innerHTML tag of the
// fetched h2 heading
h2Heading.innerHTML = "Welcome here!";
}, 4000);
}
function stopFunction() {
clearTimeout(setTimeoutID);
}
</script>
</body>
</html>
Producción:
Método setInterval() : este método se utiliza para ejecutar repetidamente un fragmento de código dentro de un intervalo de tiempo fijo entre cada llamada. El significado y uso de cada uno de los parámetros es el mismo que el del método setTimeout() . Devuelve un entero positivo que representa el ID del temporizador creado debido a la llamada del método setTimeout. Es opcional usar una variable para almacenar la ID, pero depende de los casos en los que queramos cancelar el temporizador usando el método clearInterval() .
Los parámetros pasados (especificados después del tiempo de retardo) son opcionales y son accesibles para la función. El retraso es el tiempo que decide con qué frecuencia se ejecuta la función pasada como parámetro. Está escrito en milisegundos, por lo que ‘1000’ representa ‘1’ segundo.
Sintaxis:
var intervalID = scope.setInterval(function, delay, param1, param2, ...)
Método clearInterval() : Este método se utiliza para cancelar la acción cronometrada repetitiva establecida mediante el método setInterval() . Este método detiene la ejecución de la función pasada como parámetro si se llama antes de que finalicen todos los intervalos del método setInterval().
Acepta un solo parámetro que es el ID de intervalo que devuelve el método setInterval() . Una ID no válida pasada a este método no hará nada.
Sintaxis:
scope.clearInterval(intervalID)
El siguiente ejemplo demuestra el método clearInterval():
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center; color:#378E47;">
<h1> GeeksforGeeks Counter.</h1>
<h2 style="font-size:5em;">10</h2>
<!-- Setting the onclick method for the button -->
<button onclick="geeksforgeeksCounter()">
Press me
</button>
<!-- JavaScript code -->
<script>
// Variable for maintaining count of the timer
let count = 10;
function geeksforgeeksCounter() {
// Fetching the 0th indexed h2 element
var h2Heading =
document.getElementsByTagName("h2")[0];
var countDownID = setInterval(function () {
count--;
h2Heading.innerHTML = count;
if (count <= 0) {
// Changing the innerHTML tag of
// the fetched h2 heading.
h2Heading.innerHTML = "Welcome here!";
// Stop the timer
clearInterval(countDownID);
}
}, 1000);
}
</script>
</body>
</html>
Producción:
Otros puntos clave:
- Los métodos setTimeout() y setInterval() comparten el mismo grupo para almacenar ID, lo que significa que podemos usar los métodos clearTimeout() y clearInterval() indistintamente. Sin embargo, debemos evitar hacerlo.
- Los navegadores que admiten los métodos setTimeout() y setInterval() son principalmente Google Chrome, Internet Explorer, Safari, Opera y Firefox.
- Cuando no necesita usar el método clearTimeout() o clearInterval() , entonces no es necesario almacenar la ID devuelta por el método s etTimeout() o setInterval() respectivamente.
Publicación traducida automáticamente
Artículo escrito por bhambrilavisha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA