Aprende Web
Crea y diseña tus sitios en la Web.
Manual de Javascript
Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
RSS. Suscribir canal. Buscar en Aprende Web
Traducir página
Visita nuestro blog:
y entérate de las novedades o deja un comentario.
Dudas y sugerencias:
Sobre ésta página
última modificación: 13-07-2018.
Visitas este mes: 23
Visitas el mes pasado: 47
WEB-GRAFÍA
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
- Desarrollo Web: manual de Javascript
- Desarrollo Web, por Miguel Angel Álvarez
- Libros Web: introducción a Javascript
- Libros web, por Javier Eguíluz Pérez
- Curso de Javascript: Programación Web
- www.programacionweb.net
- WebEstilo: JavaScript
- www.webestilo.com
- W3 schools; Javascript Tutorial
- www.w3schools.com
- Manual de Javascript: José Antonio Rodríguez.
- Jose Antonio Rodriguez: manual en PDF
GRACIAS
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
10. El tiempo (III)
10.3 Control del tiempo
Control del tiempo de ejecución de scripts
Sin embargo muchas veces lo que queremos es controlar el tiempo que el usuario tarda
en reaccionar ante un evento, o que una instrucción se ejecute pasado un cierto tiempo, o
que la instrucción se repita cada cierto tiempo. Para ello javascript posee unos métodos
bastante útiles, estos son los métodos setTimeout() y setInterval(). En realidad
estos métodos nada tienen que ver con el objeto Date visto en la página anterior; sino
que dependen directamente del objeto window, por lo que no escribiremos
nada delante.
Método setTimeout()
Este método hace que se ejecuten una serie de instrucciones contenidas dentro de una función después de transcurrido un cierto periodo de tiempo. Para ello dentro del paréntesis debemos pasar dos parámetros. El primero es el nombre de la función (sin los paréntesis), y el segundo el número de milisegundos que deben pasar hasta que la función se ejecute.
Por ejemplo si tenemos una función llamada enDiezSegundos() y queremos
que se ejecute a los 10 segundos de haberla llamado, escribiremos el siguiente
código:
setTimeout(enDiezSegundos,10000)
Método setInterval()
Sin embargo si lo que queremos es que una instrucción se repita continuamente cada
cierto intervalo de tiempo, debemos usar el método setInterval(). Este método hace que
una instrucción se repita indefinidamente a intervalos regulares de tiempo. La forma de aplicarla
es igual que la función anterior, es decir, como primer parámetro se pasa el nombre
de la función que debe repetirse, y como segundo el número de milisegundos entre cada
intervalo.
por ejemplo, si tenemos una funcion llamada repetir() y queremos que se repita
cada 5 segundos escribiremos:
setInterval(repetir,5000)
Métodos clearTimeout() y clearInterval()
Los métodos clearTimeout() y clearInterval() detienen el
temporizador que se ha puesto en marcha mediante las instrucciones setTimeout()
y setInterval() respectivamente, es decir, paran la ejecución de las instrucciones
de estos métodos.
En clearTimeout impide que se ejecute la función indicada en setTimeout
si aún no ha transcurrido el tiempo de espera.
En clearInterval detiene la ejecución de la repetición provocada por
el método setInterval
El parámetro que hay que pasar dentro del paréntesis es la respectiva función
que debe parar el temporizador, por lo que debemos guardar la función que empieza por
set.. en una variable para pasarla luego a la función clear...
que las detiene. Ejemplo:
cuentaAtras = setInterval(segundos,1000)
El método setInterval seguirá funcionando igual, por lo
que tal como lo hemos escrito aquí, llamará a la función segundos()
para que se ejecute cada 1000 milisegundos.
En el método clearInterval() pasaremos como parámetro la variable donde
hemos guardado el método anterior:
clearInterval(cuentaAtras)
En cuanto se llame al método clearInterval las instrucciones de
setInterval dejarán de ejecutarse. Lo normal es que esto se haga al cumplirse
una condición (mediante una instrucción if) o mediante un evento (que el usuario pueda
detenerla).
Hemos visto el ejemplo con el método clearInterval, pero el método
clearTimeout funciona exactamente igual, es decir, hay que pasar como parámetro
una variable en donde está guardado el método setTimeout que queremos detener.
Ejemplo del método setInterval
Veamos una página de ejemplo en la que usamos el método setInterval(), y
su correspondiente método clearInterval() para pararlo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Repetición de intervalos.</title> <script type="text/javascript"> var contar = 11 //valor inicial. window.onload = function() { document.getElementById("imagen").style.display = "none"; //ocultar imagen cuenta = document.getElementById("cuenta"); //elemento donde escribimos la cuenta atrás } function despegar() { function cuentaAtras() { document.getElementById("imagen").style.display = "none"; //imagen invisible si se comienza de nuevo contar -=1; //variar el número de la cuenta cuenta.innerHTML = contar; //escribir el número if (contar <= 0) { //cuando llegamos a 0... clearInterval(ignicion) //parar la cuenta atrás. //visualizar la imagen. document.getElementById("imagen").style.display = "block" } } cuentaAtras() //llamada a la función de cuenta atrás //repetir la función cuenta atrás cada segundo ignicion = setInterval(cuentaAtras,1000); } </script> </head> <body> <h1 align="center">Pulsa para iniciar la cuenta atrás.</h1> <p><form action="#" name="laCuenta"> <p align="center"><input type="button" name="comenzar" value="Empezar la cuenta atrás." onclick="contar=11,despegar()" /> ... </p> </form> <h1 align="center" id="cuenta"></h1> <p id="imagen" align="center"><img src="objetos/despegue.jpg" alt="Ignición" name="cohete"></p> </body> </html>
Puedes ver cómo queda esta página de ejemplo en tu navegador, pulsando en el siguiente enlace:
Intervalos para cuenta atrás .
Puedes observar que en la página anterior hemos anidado dos funciones. Dentro de la
primera ponemos el método setInterval() y en la segunda, las instrucciones que
deben repetirse.
Esto es así porque si no ponemos el método setInterval dentro de la función,
este empieza a ejecutarse al acabar de cargarse la página, y no al llamar a la función
mediante el evento onclick.
Por otra parte debemos también incluir la segunda función (la que se repite) dentro de
la primera porque es ahí donde está la instrucción que ordena repetirla. No podemos incluir
dentro de una función el método setInterval para que ésta se repita. El método
tiene que estar fuera de la función. Es por esto por lo que hemos anidado dos funciones.
Estos métodos tienen gran cantidad de utilidades en programación javascript, ya que pueden utilizarse para crear relojes, cronómetros, elementos que se desplazan a una cierta velocidad, cambiar el fondo cada cierto tiempo, etc.
En el siguiente tema veremos métodos y propiedades predeterminadas de javascript para las cadenas de texto y los arrays.
imprimir esta página
Página creada por ANYELGUTI.
Sugerencias:
aprendeweb@aprende-web.net. Envia un 
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com