Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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.

Texto y arrays

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