En javascript podemos utilizar eventos temporales, jugar con el tiempo de ejecución, detenerlos, activarlos… y de esa forma lograr efectos espectaculares.

Para poder trabajar con el tiempo, javascript nos ofrece dos métodos principales:

• setTimeout(función, milisegundos)
• setInterval(función, milisegundos)

El método setTimeOut

Este método ejecuta la función que recibe en el primer argumento cuando ha transcurrido el tiempo que recibe en el segundo.

En el siguiente vemos un ejemplo muy simple sobre como funciona este método, la hacer click en un botón y esperar tres segundos a que se ejecute la función:

<button onclick="setTimeout(myFunction, 3000);">Haz Clik</button>
<script>
function myFunction() {
    alert('Hola');
}
</script>

Puede ocurrir que queramos detener una función antes de que se ejecute por medio de setTimeout(), y para ello JavaScript pone a nuestra disposición el método clearTimeout() el cual detiene la ejecución del setTimeout(), tal y como podemos ver en el siguiente ejemplo, ampliando el anterior, donde si pulsamos en detener antes de que se ejecute la función argumento esta no se ejecutará:

<button onclick="myVar = setTimeout(myFunction, 3000)">Activar</button>
<button onclick="clearTimeout(myVar)">Detener</button>
<script>
function myFunction() {
    alert("Hola");
}
</script>

El método setInterval

Este método ejecuta la función que tiene en el primer argumento cada tiempo que recibe en el segundo, como si se tratase de un bucle.

De esta forma podemos ejecutar infinitamente una función para que haga algo que necesitamos, y el mejor ejemplo para ilustrarlo es por medio de un reloj en la web, donde podemos hacerlo con tan solo unas líneas de código muy sencillo:

<div id="reloj"></div>
<script>
var myVar = setInterval(reloj, 1000);
function reloj() {
    var d = new Date();
    document.getElementById("reloj").innerHTML = d.toLocaleTimeString();
}
</script>

Y al igual que antes podemos querer detener la ejecución de la función que se repite cuando ocurra algo, para ello vamos a utilizar un método llamado clearInterval() que recibe como argumento la variable a detener… y ampliando el ejemplo del reloj vamos a hacer que se detenga cuando pulsemos un botón:

<div id="reloj"></div>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
var myVar = setInterval(reloj ,1000);
function reloj() {
    var d = new Date();
    document.getElementById("reloj").innerHTML = d.toLocaleTimeString();
}
</script>

De esta forma tan sencilla podemos controlar eventos temporales en Javascript. Espero que os haya servido y que lo compartáis o dejéis un comentario…