Javascript, programar intervalos y retardo en la ejecución de funciones

En javascript hay veces que estamos interesados en ejecutar una función ‘n’ segundos después de que algo ocurra. En javascript existen dos funciones que nos permiten configurar un intervalo de ejecuciones (‘setInterval’) o un retardo en la ejecución de un método (‘setTimeout’).

En este tutorial vamos a ver un ejemplo de cada una,  programaremos un intervalo de ejecuacíon de un método, y un retardo en la ejeción de otra función.

setInterval, configurar ejecuciones periódicas de funciones javascript

Con esta función lo que vamos a conseguir es que una función se ejecute cada cierto tiempo, que será el segundo parámetro que reciba la función.

Esto podría ser util por ejemplo para hacer un temporizador o cuentaatrás, programando que cada segundo se reste uno a cierta variable, y que cuando llegue a cero se muestre un mensaje.

La función a utilizar para configurar los intervalos de ejecución es:

1
setInterval("javascript function",milisegundos);

Esta función recibe dos parámetros:

1. Función a ejecutar
2. Intervalo en milisegundos que debe trasncurrir hasta lanzar la siguiente ejecución

Ejemplo de una cuentraatrás con mensaje de alerta

En el siguiente ejemplo utliizaremos la funcion ‘setInterval’ de javascript para crear un temporizador, que empezando en 10 cada segundo reste uno hasta llegar a cero. Es decir, creamos un reloj de cuentaatrás para 10 segundos.

Configuramos el intervalo cada ‘10000ms’ (10segundos) y se ejecutará la función que  ‘restar’ hasta que llegue a cero. Entonces se mostrará un mensaje por pantalla y pararemos la ejecución que estaba programada haciendo uso de la función javascript ‘clearInterval(nombreVariable)’, donde ‘nombreVariable’ en nuestro caso será ‘temporizador’ ya que así lo hemos definido en la última línea del ejemplo.

 Javascript | 
 
 copy code |
?

01
var contador=10;
02
 
03
function restar(){
04
     contador=contador-1;
05
     if(contador==0){
06
        acabarCuentaAtras();
07
    }
08
}
09
 
10
function acabarCuentaAtras(){
11
    clearInterval(temporizador); // Paramos la ejecución del método, indicando la variable creada al final
12
    alert("Fin del tiempo, ha llegado a cero");
13
}
14
 
15
var temporizador=setInterval(function(){restar()},10000); // 10000ms = 10s
16

setTimeout, retrasar la ejecución de una función javascript

Con esta función ‘setTimeout’ lo que estamos configurando es que otra función se ejecute una única vez pasados los milisegundos que indiquemos. Para utilizar esta función tendriamos que añadir la siguiente línea:

1
setTimeout("javascript function",milisegundos);

Esta función recibe dos parámetros:

1. Función a ejecutar
2. Tiempo en milisegundos que debe trasncurrir hasta lanzar la única ejecuación de la función

Por ejemplo, vamos a mostrar un código que programa un aviso pasados tres segundos:

 Javascript | 
 
 copy code |
?

1
function programarAviso(){
2
    setTimeout(function(){mostrarAviso()},3000); // 3000ms = 3s
3
}
4
 
5
function mostrarAviso(){
6
    alert("Han pasado los tres segundos");
7
}
8

Esperamos que el tutorial os sirva de ayuda. Es algo orientativo, si necesitais más información poneros en contacto con nosotros e intentaremos ayudaros y añadiremos nuevos ejemplos a esta entrada para completarla con las cosas que nos indiqueis.

Sobre David Otero

David Otero es uno de los creadores y desarrolladores que componen Developando. Puedes contactar con él en León, Zamora o Madrid.
Conoce a David Otero en Google+.

Find more about me on:
• 
• 
• 
•