Eventos de temporización de JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
|
JavaScript se puede ejecutar en intervalos de tiempo. Esto se llama eventos de tiempo. |
Eventos de tiempo
El window
objeto permite la ejecución de código en intervalos de tiempo específicos.
Estos intervalos de tiempo se denominan eventos de tiempo.
Los dos métodos clave para usar con JavaScript son:
setTimeout(function, milliseconds
)
Ejecuta una función, después de esperar un número específico de milisegundos.setInterval(function, milliseconds
)
Igual que setTimeout(), pero repite la ejecución de la función continuamente.
Los setTimeout()
y setInterval()
son ambos métodos del objeto HTML DOM Window.
El método setTimeout()
window.setTimeout(function, milliseconds);
El window.setTimeout()
método se puede escribir sin el prefijo de ventana.
El primer parámetro es una función a ejecutar.
El segundo parámetro indica el número de milisegundos antes de la ejecución.
Ejemplo
Haga clic en un botón. Espere 3 segundos, y la página alertará "Hola":
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
¿Cómo detener la ejecución?
El clearTimeout()
método detiene la ejecución de la función especificada en setTimeout().
window.clearTimeout(timeoutVariable)
El window.clearTimeout()
método se puede escribir sin el prefijo de ventana.
El clearTimeout()
método utiliza la variable devuelta por setTimeout()
:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
Si la función aún no se ha ejecutado, puede detener la ejecución llamando al clearTimeout()
método:
Ejemplo
El mismo ejemplo que el anterior, pero con un botón "Detener" agregado:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
El método setInterval()
El setInterval()
método repite una función dada en cada intervalo de tiempo dado.
window.setInterval(function, milliseconds);
El window.setInterval()
método se puede escribir sin el prefijo de ventana.
El primer parámetro es la función a ejecutar.
El segundo parámetro indica la duración del intervalo de tiempo entre cada ejecución.
Este ejemplo ejecuta una función llamada "myTimer" una vez cada segundo (como un reloj digital).
Ejemplo
Mostrar la hora actual:
setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
Hay 1000 milisegundos en un segundo.
¿Cómo detener la ejecución?
El clearInterval()
método detiene las ejecuciones de la función especificada en el método setInterval().
window.clearInterval(timerVariable)
El window.clearInterval()
método se puede escribir sin el prefijo de ventana.
El clearInterval()
método utiliza la variable devuelta por setInterval()
:
let myVar = setInterval(function, milliseconds);
clearInterval(myVar);
Ejemplo
El mismo ejemplo que el anterior, pero hemos agregado un botón "Detener el tiempo":
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
let myVar = setInterval(myTimer, 1000);
function myTimer() {
const d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>