Ir al contenido principal

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.

var miSetOut = setTimeout( Funci , Tiempo );

Descripción de cada variable 
Funci : Requerido. Es la función que se ejecutará después de un determinado tiempo.
miSetOut : Con esta variable podemos detener la llamada de la función con el método clearTimeout. Tiempo : Requerido. Es el tiempo transcurrido antes que se ejecute la función(Esta en milisegundos 1000 ms).
Nota : setTimeout es compatible con los principales navegadores (IE, Firefox, Chrome, Opera, Safari).
Observaciones del ejemplo anterior:
  1. Podemos usar también setTimeout sin asignarle a una variable así como en la línea 4 .
  2. Pasar cadenas en vez de una función a setTimeout ("alert('Pasaron 2 segundos!')") , puede traer errores no pensados. Ver aquí.
  3. 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.

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.


Observaciones del ejemplo anterior:

  1. 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í.
  2. 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).
Para solucionar esto, no es más que crear una función anónima, por ejemplo.

Ejemplo : Se cambia la imagen cada segundo.




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
  10. Hola queria saber si sabes cual es el codigo HTML/Javascript que usa hackstore.net para ocultar sus links de descarga y tener que esperar 60 segundo o compartir porfavor ayudame

    ResponderEliminar
    Respuestas
    1. Justo este post te puede servir, practica los ejemplos y tu mismo podrás hacer el tuyo. Suerte!

      Eliminar
  11. Uff, el como pasar parámetros me ayudo mucho, gracias!

    ResponderEliminar
  12. Hola! Como podria hacer para que un elemento aparezca usando timeout? gracias!

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Validar campo de texto sólo letras, números con javascript

En algunos casos necesitaremos que el usuario ingrese solamente letras en un campo de texto, impidiendo así el ingreso de números y caracteres especiales. Gracias a Javascript y HTML esto puede ser posible.   Método 1:  Podemos utilizar el atributo onkeypress devolviendo el valor de false, si es que se escribe un caracter distinto a la cadena que hemos definido (para el ejemplo es " áéíóúabcdefghijklmnñopqrstuvwxyz").   Método 2: Pasos a seguir: Crear una lista con todas las letras permitidas (a,b,c ... etc). Crear una lista de teclas especiales tales como (BackSpace , flecha izquierda, flecha derecha, Supr) estas son teclas permitidas aparte de las teclas permitidas en el primer paso.     Entendiendo el código En la línea 4 la sentencia String.fromCharCode(key) obteniene el caracter presionado por el usuario que añadiendo la sentencia toLowerCase() convertiríamos la letra a minúscula. Con esto guardamos la letra presionada por el usuario en la variabl

Validar campo de texto con javascript

Obligar al usuario a introducir un valor en un campo de texto perteneciente a un formulario se puede hacer de la siguiente manera con javascript. Código < script type = "text/javascript" > function validar () { //obteniendo el valor que se puso en campo text del formulario miCampoTexto = document . getElementById ( "miCampo" ) . value ; //la condición if ( miCampoTexto . length == 0 ) { return false ; } return true ; } </ script > < form action = "mipagina.php" onsubmit = "return validar()" > < input type = "text" id = " miCampo " name = "miCampo" > < br > < input type = "submit" value = "Enviar" > </ form > miCampoTexto.length -> indica el número de caracteres del texto introducido En esta validación los usuarios deben llenar los campos

La propiedad Disabled en Javascript

Como atributo de un elemento HTML Ejemplo: "Solo añadiendo el atributo disabled". < input type = "button" value = "Desactivado" disabled /> < input type = "text" disabled /> < input type = "button" value = "Boton normal" /> Demostración: El botón y el campo de texto están desactivados Manipulando Disabled usando Javascript Ejemplo 1: Utilizando el "id" del campo de texto en este caso "miText". < script type = "text/javascript" > function Desactivar () { document . getElementById ( 'miText' ) . disabled = true ; } < /script > < input type = "button" value = "Desactivar" onclick = "Desactivar()" / > < input type = "text" id = "miText" / > Demostración: Dándole clic al botón se desactiva el campo de texto. Ejemplo 2:Utilizando el event