JavaScript Eventos de temporización

1
2
3
4
5
6
7
8
9
10
11
12

JavaScript ejecuta código después de un intervalo de tiempo establecido

Lo llamamos evento de temporización

Eventos de temporización de JavaScript

Mediante el uso de JavaScript, tenemos la capacidad de ejecutar código después de un intervalo de tiempo establecido, en lugar de hacerlo inmediatamente después de que se llame a la función. Lo llamamos evento de temporización.

Usar eventos de temporización en JavaScript es muy fácil; dos métodos clave son:

  • setInterval() - Ejecuta el código especificado continuamente cada intervalo de milisegundos especificado.
  • setTimeout() - Ejecuta el código especificado después del número de milisegundos especificado.

Nota:setInterval() y setTimeout() son dos métodos del objeto Window de HTML DOM.

Método setInterval()

setInterval() ejecuta continuamente el código especificado cada intervalo de milisegundos especificado.

Sintaxis

window.setInterval("javascript function",milliseconds);

window.setInterval()El método se puede usar sin el prefijo window, llamando directamente a la función.setInterval()。

El primer parámetro de setInterval() es una función.

El segundo parámetro es el número de milisegundos del intervalo.

Nota:1000 milisegundos son un segundo.

Ejemplo

Mostrar "hello" cada tres segundos:

setInterval(function(){alert("Hello")},3000);

Pruébalo »

El ejemplo muestra cómo usar el método setInterval(), pero mostrar una ventana emergente cada tres segundos no es una buena experiencia de usuario.

El siguiente ejemplo mostrará la hora actual. El método setInterval() configura la ejecución del código cada segundo, igual que un reloj.

Ejemplo

Mostrar la hora actual

var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; }

Pruébalo »

¿Cómo detener la ejecución?

El método clearInterval() se utiliza para detener el código de la función que ejecuta el método setInterval().

Sintaxis

window.clearInterval(intervalVariable)

window.clearInterval()El método se puede usar sin el prefijo window, llamando directamente a la función.clearInterval()。

Para usar el método clearInterval(), debes usar una variable global al crear el método de temporización:

myVar=setInterval("javascript function",milliseconds);

Luego puedes usar el método clearInterval() para detener la ejecución.

Ejemplo

En el siguiente ejemplo, agregamos un botón "Detener":

<p id="demo"></p> <button onclick="myStopFunction()">Detener</button> <script> var myVar=setInterval(function(){myTimer()},1000); function myTimer(){ var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; } function myStopFunction(){ clearInterval(myVar); } </script>

Pruébalo »

Método setTimeout()

Sintaxis

myVar= window.setTimeout("javascript function", milliseconds);

El método setTimeout() devuelve un valor. En la declaración anterior, el valor se almacena en una variable llamada myVar. Si deseas cancelar este setTimeout(), puedes usar este nombre de variable para referenciarlo.

El primer parámetro de setTimeout() es una cadena que contiene sentencias de JavaScript. Esta sentencia puede ser, por ejemplo, "alert('5 seconds!')", o una llamada a una función, como alertMsg.

El segundo parámetro indica cuántos milisegundos deben transcurrir desde ahora hasta que se ejecute el primer parámetro.

Consejo:1000 milisegundos equivalen a un segundo.

Ejemplo

Espera 3 segundos y luego muestra "Hello":

setTimeout(function(){alert("Hello")},3000);

Pruébalo »

¿Cómo detener la ejecución?

El método clearTimeout() se utiliza para detener la ejecución del código de la función del método setTimeout().

Sintaxis

window.clearTimeout(timeoutVariable)

window.clearTimeout()El método se puede usar sin el prefijo window.

Para usar el método clearTimeout(), debes usar una variable global al crear el método de tiempo de espera (setTimeout):

myVar=setTimeout("javascript function",milliseconds);

Si la función aún no se ha ejecutado, puedes usar el método clearTimeout() para detener la ejecución del código de la función.

Ejemplo

A continuación se muestra el mismo ejemplo, pero con un botón "Stop the alert" agregado:

var myVar; function myFunction() { myVar=setTimeout(function(){alert("Hello")},3000); } function myStopFunction() { clearTimeout(myVar); }

Pruébalo »

Examples

Más ejemplos

Otro temporizador simple

Otras extensiones