peivem.com cerrará sus puertas
Esta entrada ha sido publicada en mi nuevo blog, en:
http://www.sebastianbarria.com/web/settimeout-y-setinterval/
Por favor, visita mi nuevo sitio, porque este lo daré de baja muy pronto. Gracias!

Aunque no son muy conocidas por quienes están comenzando en el tema de la programación, estas dos funciones son una maravilla. Son funciones existentes en varios lenguajes de programación, como en Javascript y en Actionscript, que nos sacarán de varios apuros y nos permitirán optimizar y mejorar nuestros códigos.

Su objetivo principal es el de definir un tiempo para esperar a ejecutar alguna otra función. Por ejemplo, si necesito mostrar una alerta y que desaparezca en 3 segundos más, o si necesito que un reloj vaya actualizándose cada 1 segundo.

setTimeout()

Esta función permite definir un tiempo específico para que se ejecute una tarea una sola vez. Se utiliza de la siguiente manera:

var t = setTimeout(funcion,tiempo);

setInterval()

Este función permite ejecutar una tarea infinitas veces cada una cierta cantidad de tiempo. Se utiliza de la siguiente manera:

var t = setTimeout(funcion,tiempo);

El tiempo de ambas funciones se mide en milisegundos, es decir, que 1000=1 segundo

clearTimeout()

Esta función permite anular alguna llamada específica a setTimeout() o setInterval(). Se utiliza de la siguiente manera:

clearTimeout(t);

Donde t corresponde a la variable que se definió para almacenar la llamada a alguna de las otras dos funciones.

Hay que tener cuidado de saber bien donde se definió la variable t, pues si está definida dentro de otra función o de un movieClip (en el caso de Actionscript), no va a funcionar si no se "rutea" bien la llamada a esa variable.

Vamos a un ejemplo práctico

Javascript

Vamos a realizar un contador como ejemplo. Este es el código que debemos utilizar:

var tiempoInicial=10;
function tiempo(){
    tiempoInicial--;
    document.getElementById('tiempo').innerHTML=tiempoInicial;
    if(tiempoInicial==0){
        clearTimeout(t);
        alert("fin");
    }
}
var t = setInterval(tiempo,1000);

Al principio del script se define la variable "tiempoInicial", que será la misma que iremos utilizando para ir contando hacia atrás.

La variable no se puede llamar "tiempo", pues la función que utilizaremos se llama tiempo y si ambas se llamasen igual javascript no sabría si nos estamos refiriendo a la función o a la variable.

El div dentro del cual se mostrarán los segundos restantes se llama tiempo también, y este no generará ningún conflicto con la funcion tiempo, ya que no es un elemento de javascript, sino uno de HTML.

Luego definimos la función tiempo, que lo que hace es restar un segundo a la variable tiempoInicial, mostrarla dentro del DIV cuyo ID es "tiempo", y luego verificar: si el tiempo es igual a 0, anula el intervalo de tiempo que se define inicialmente, es decir que deja de llamar a la función tiempo() cada un segundo.

Bajo la función se llama a la función setInterval y se define que el tiempo de intervalo sea cada un segundo (1000 ms). Antes de llamarla, se define la variable t, que es la que almacenará el intervalo para luego poder anularlo con clearTimeout desde dentro de la función.

Como este javascript se carga al principio de la página, en la práctica suceden 3 cosas:

1. se define el tiempo inicial
2. se define la función tiempo()
3. se establece el intervalo de tiempo

Estas cosas no vuelven a ejecutarse porque la página ya se cargó, pero el setInterval deja en memoria que se debe llamar a la función tiempo() cada un segundo eternamente, o hasta que se anule con la función clearInterval.

Descargar el archivo de ejemplo

Actionscript

Para actionscript la función es exactamente la misma, solamente que el número de segundos restantes debe mostrarse de otra manera. No voy a profundizar mucho en esta versión pero les dejo el archivo de ejemplo para que lo analicen ustedes mismos.

Descargar el archivo de ejemplo