Cómo ejecutar un código JavaScript tras X segundos

JavaScript dispone de dos funciones nativas (setTimeout() y setInterval()) muy útiles para ejecutar código tras un tiempo especificado. Vamos a ver cómo se utilizan.

setTimeout(func, x)

Ejecuta el código func al pasar x milisegundos. Parámetros:

• func: función anónima, nombre de una función o variable que apunta a una función
• x: el número de milisegundos de retraso

Soporte: Todos los navegadores (desde IE 4)

Así si, por ejemplo, queremos mostrar un mensaje a los tres segundos de cargar una página escribiremos el siguiente script antes de </body>

<script type="application/javascript">

setTimeout(
    function(){
        alert('Bienvenido');
    },
    3000
);

</script>

o bien:

<script type="application/javascript">

function saludo(){
  alert('Bienvenido');
}

setTimeout(saludo, 3000);

</script>

La mayor pega de esta versión de setTimeout() es que no permite el paso de parámetros a la función llamada, así que para tales casos tendrás que recurrir a rodeos como usar variables globales y similares. Sin embargo, si no necesitas dar soporte a Internet Explorer 9 e inferiores, podrás usar la versión más reciente de setTimeout() con soporte para paso de parámetros (en las referencias del final tienes más detalles). Su cabecera es:
setTimeout(func, retraso, param1, param2, ...) y puedes usarla de la siguiente forma:

function saludo(nombre){
  alert('Bienvenido ' + nombre);
}
setTimeout(saludo, 2000, usuario); 

Como has podido intuir, setTimeout() sólo se ejecuta una vez. ¿Qué pasa si queremos ejecutar de forma reiterada una función? Aquí entra en escena setInterval().

setInterval(func, x)

Ejecuta el código func cada x milisegundos. Parámetros:

• func: función anónima, nombre de una función o variable que apunta a una función
• x: el número de milisegundos de intervalo entre ejecuciones

Soporte: Todos los navegadores (desde IE 4)
Veamos cómo ejecutaríamos el ejemplo de antes cada 3 segundos:

<script type="application/javascript">

function saludo(){
  alert('Bienvenido');
}

setInterval(saludo, 3000);

</script>

Como ves, su uso es similar a setTimeout, y al igual que este, dispone de una versión más actual con soporte para paso de parámetros. Puedes ver más información siguiendo los enlaces de las referencias.


Referencias: setTimeout en MDN, setInterval en MDN, JavaScript Timers en MDN