Estas dos funciones permiten ejecutar una función pasado un cierto intervalo de tiempo. La única diferencia entre ellas es que “setInterval” se ejecutará una y otra vez en intervalos de x segundos, en cambio, setTimeout se ejecutará una sola vez pasados x segundos.
Estas funciones se utilizan sobre todo para realizar animaciones o por ejemplo para redireccionar una página transcurridos x segundos.
Por ejemplo, si quisiéramos programar un reloj en la barra de estado la función más idónea sería setInterval. Teniendo una función llamada “reloj()” que imprime en la barra de estado la hora actual utilizaríamos la función setInterval de esta forma:
setInterval("reloj()",1000);
El primer parámetro es la función a ejecutar, el segundo es el intervalo en milisegundos, es decir, 1000 milisegundos = 1 segundo. De esta forma, cada segundo se ejecutará la función “reloj()” y por lo tanto se mostrará un reloj con la hora actual que irá cambiando segundo a segundo. La función reloj() podría ser esta:
function reloj() {
var fObj = new Date() ;
var horas = fObj.getHours() ;
var minutos = fObj.getMinutes() ;
var segundos = fObj.getSeconds() ;
if (horas <= 9) horas = "0" + horas;
if (minutos <= 9) minutos = "0" + minutos;
if (segundos <= 9) segundos = "0" + segundos;
window.status = horas+":"+minutos+":"+segundos;
}
La otra función, setTimeout, tiene un uso muy similar, pero como ya hemos dicho, sólo se ejecuta una vez y podemos aprovechar esta característica para redireccionar una página. Por ejemplo:
setTimeout("document.location.href='http://abrahanapaza.wordpress.com;",5000);
Con este código en 5s el usuario sería redireccionado a Google.
Además estas funciones devuelven un identificador que nos permitirán neutralizarlas con sus respectivas funciones clearTimeout y clearInterval. Es decir:
var id = setInterval("reloj()",1000);
setTimeout("clearInterval("+id+")",15000);
Con este ejemplo ejecutamos nuestro reloj durante 15 segundos.
En definitiva, sencillas funciones que llegan a resultar muy útiles.
