Uso del método setTimeout en Javascript al detalle


Si queremos que después de un tiempo determinado se haga el llamado de una función, entonces lo que debemos usar es el método "setTimeout". El método setTimeout utiliza 2 argumentos como vemos a continuación.

Sintaxis

var miSetOut = setTimeout( Funci , Tiempo );
Nota : setTimeout es compatible con los principales navegadores (IE, Firefox, Chrome, Opera, Safari).

Ejemplo 1 : Sale un mensaje después de 2 segundos.

<script text="javascript">
    function ActivarTiempo(){
        //se activa el método alert luego de 2 segundos
        setTimeout("alert('Pasaron 2 segundos!')",2000);
    }
</script>

<input type="button" value="Sale un mensaje pasado 2 segundos" onclick="ActivarTiempo()"/>

Demostración


Observaciones del ejemplo anterior:

  • Podemos usar también setTimeout sin asignarle a una variable así como en la línea 4 . 
  • Pasar cadenas en vez de una función a setTimeout ("alert('Pasaron 2 segundos!')") , puede traer errores no pensados. Ver aquí
  • El método setTimeout() no detiene la ejecución de la secuencia de comando durante el tiempo de espera, sino que la función especificada es llamada después del tiempo determinado, lo demás sigue ejecutándose con normalidad.
Ejemplo 2 : setTimeout llamando a una función luego de 2 segundos.

<script text="javascript">
    function ActivarTiempo(){
        //se activa la función Mensaje() luego de 2 segundos
        setTimeout(Mensaje,2000);    
    }
    function Mensaje(){
        alert("Hola =)!");
    }
</script>

<input type="button" value="Sale un mensaje pasado 2 segundos" onclick="ActivarTiempo()"/>
Demostracion :



En el ejemplo anterior : Al presionar el boton se llama a la función ActivarTiempo() que utiliza el método setTimeout el cual llama a la función Mensaje() luego de 2 segundos.
Ejemplo 3 : Hacer un Reloj, utilizando una función que usa el setTimeout para llamar a la misma función.
<script type="text/javascript">
    function ActivarReloj(){
        //Obteniendo datos del tiempo
        var laHora = new Date();
        var horario = laHora.getHours();
        var minutero = laHora.getMinutes();
        var segundero = laHora.getSeconds();
  
        if(minutero<10)
            minutero = "0" + minutero;
        if(segundero<10)
            segundero = "0" + segundero;
 
        //escribiendo sobre el campo de texto la hora actual 
        document.getElementById('sonLas').value = horario+":"+minutero+":"+segundero;
        //Desactivando el boton 'Activar Reloj'
        document.getElementById('botonActivar').disabled=true; 
        //Actualizando la hora cada 1 segundo
        ahoraSonLas = setTimeout(ActivarReloj,1000); 
    } 
  
    function DetenerReloj(){
        // Deteniendo el setTimeout
        clearTimeout(ahoraSonLas);
        // Volviendo el boton 'Activar Reloj' a la normalidad
        document.getElementById('botonActivar').disabled=false;
    }
</script>

</br>
<input type="text" id="sonLas"/></br>
<input type="button" onclick="ActivarReloj()" id="botonActivar" value="Activar Reloj"/>
<input type="button" onclick="DetenerReloj()" value="Detener Reloj"/>
Demostración:
Actualizar Reloj


 
Observaciones del ejemplo anterior: 
  • En la línea 17 y 26 se usa la propiedad "disabled" para desactivar y activar el primer botón, mas información puedes encontrar en el siguiente enlace de este blog . Aquí. 
  • El método setTimeout devuelve un ID númerico de tiempo de espera , que podemos guardar en una variable para usarlo con el método clearTimeout para detener el tiempo de espera.(línea 19 y 24).

-Como pasar parámetros a la función llamada por un setTimeout

Como ya se visto el método setTimeout recibe como argumentos, el nombre de la función y el tiempo de espera , pero ¿alguna vez has intentado pasar la funcion con argumentos ?.

La solución mas sencilla seria pasar la función como cadena concatenando el argumento a pasar , aunque no es recomendable debido a seguridad (visto mas atrás).

var miSetOut = setTimeout( 'Funci(' + arg + ')' ,2000 ); 
//se había dicho que no convenía poner cadenas

Para solucionar esto, no es más que crear una función anónima, por ejemplo.

var miSetOut = setTimeout( function(){miFuncion(arg);} ,2000 );

Ejemplo : Se cambia la imagen cada segundo.
<script type="text/javascript">
    function iniciar(indice){
        //desactivando y activando los botones
        document.getElementById('miBotonIni').disabled = true;
        document.getElementById('miBotonPar').disabled = false;
 
        //Creando el array de nombres de imagenes
        var misImagenes = ['gplus.png','facebook.png','twitter.png','rss.png'];
 
        //Si está en el último valor del array vuelve al comienzo
        indice = (indice!=3)?(indice+1):0; 
        document.getElementById('miImagen').src = misImagenes[indice];
 
        //Utilizando setTimeout enviando una función con parametros
        tiempo = setTimeout(function(){iniciar(indice)},1000);
    }

    function parar(){
        //activando y desactivando los botones
        document.getElementById('miBotonIni').disabled = false;
        document.getElementById('miBotonPar').disabled = true;
 
        //deteniedo el temporizador
        clearTimeout(tiempo);
    }
</script>

<input id="miBotonIni" type="button" value="Iniciar !" onclick="iniciar(2)"> 
<input id="miBotonPar" type="button" value="Parar !" onclick="parar()" disabled>
<br><img id="miImagen" src="gplus.png">


Demostración

13 comentarios:

  1. bug
    indice = (indice!=3)?(indice+1):0;
    deberia ser
    indice = ((indice + 1) > 3) ? 0 : indice;
    y mejor aun
    indice = ((indice + 1) > (misImagenes.length - 1)) ? 0 : indice;

    ResponderEliminar
  2. Hola Anónimo el código funciona bien, voy a ver tu acotación

    ResponderEliminar
  3. Hola Anónimo en tu acotación no se aumenta en 1 el índice y debido a eso no se cambia la imagen

    ResponderEliminar
  4. Genial me has resueldo una gran duda. Me servio la parte de mandar un parametro ala funcion que se llama al setTimeOut. Solución: utilizando funcion anonima :D
    Gracias!!!

    ResponderEliminar
  5. muy util el reloj....gracias :]
    Atte: Vani

    *NOTA: EL CAPTCHA PARA ENVIAR COMENTARIOS
    ESTA DEMASIADO BORROSO (O ESTOY ALGO CIEGO :P)

    ResponderEliminar
    Respuestas
    1. Te diré que los Captcha siempre han sido un dolor de cabeza

      Eliminar
  6. Hola! no sé si podrías ayudarme a realizar un código que necesito; te comento, es "actualizar" parte de una página, es decir; por ejemplo tenemos el botón convocatoria, este te va a decir <> y el día 6 de diciembre se tiene que activar solo..ya llevo mucho y no tengo bien la idea de cómo hacerlo :( y apenas empiezo n esta onda

    ResponderEliminar
  7. Hola quiero ver , si podrías ayudarme a realizar un Script, lo que debe hacer es; por ejemplo tener un botón o enlace llamado Convocatoria, y este diga " se activará en 6 de diciembre" y el día & de diciembre se active de forma automática.. no tengo mucha idea de esto ya que apenas comienzo..

    ResponderEliminar
    Respuestas
    1. Eso deberias hacerlo del lado del servidor con lenguajes como PHP porque javascript saca la hora de la PC que se esta usando

      Eliminar
  8. Muchas Gracias me fue de ayuda bien mezclado con Ajax XD

    ResponderEliminar
  9. amigos me ajudem como eu uso o settimeout para quando um blog é aberto depois de 7seg por ex um outro se apre em outra janela?

    ResponderEliminar