Los
temporizadores son unos eventos interesantes y muy útiles
para lograr efectos de animación en las páginas
web, aunque pueden tener otros muchos usos. Su funcionamiento
es muy simple: cuando pasa un cierto intervalo de tiempo marcado
por nosotros se ejecuta la acción vinculada, acción
que puede ser modificada de forma dinámica. Existen
dos temporizadores: uno cíclico, la acción se
repite una y otra vez hasta que lo detengamos, y otro puntual,
se dispara una sóla vez. Este último sólo
es soportado por las versiones 4 en adelante de Internet Explorer
y Netscape. Realmente ambos pueden usarse indistintamente con
una pequeña modificación del código. El
primero de ellos se activa mediante el método del objeto
window setInterval( controlador, intervalo), mientras que el
segundo tipo de temporizador se activa mediante setTimeout(controlador,
intervalo), donde controlador es una cadena con el nombre de
la función que se ejecuta cuando pasa el tiempo marcado
por el argumento intervalo, tiempo medido en milisegundos.
Para desactivar el evento setInterval, que es cíclico,
se usa la función clearInterval( temporizador ) y para
el setTimeout se usa clearTimeout (temporizador), donde temporizador
es el objeto devuelto por el método correspondiente.
Un ejemplo de uso podría ser una aplicación que mostrara
de forma automática una serie de imágenes en la panatalla,
una especie de presentador de diapositivas:
<script language="JavaScript">
var numAct = 0;
imagenes = new Array( )
imagenes[0] = new Image( );
imagenes[0].src = "diap0.jpg";
imagenes[1] = new Image( );
imagenes[1].src = "diap1.jpg";
function mostrarImg( ) {
document.images[0].src = imagenes[numAct].src;
numAct++;
if (numAct == imagenes.length)
numAct = 0;
}
</script> ......
<body onload="tempo = setInterval( 'mostrarImg( )', 8000)">
<img src="diap0.jpg">
En ese ejemplo se usa el temporizador setInterval que llamará a la función
mostrarImg( ) cada 8 seg (8000 miliseg). El mismo ejemplo puede consturirse
usando el temporizador setTimeout( )
<script language="JavaScript">
var numAct = 0;
imagenes = new Array( );
imagenes[0] = new Image( );
imagenes[0].src = "diap0.jpg";
imagenes[1] = new Image( );
imagenes[1].src = "diap1.jpg";
function mostrarImg( ) {
document.images[0].src = imagenes[numAct].src;
numAct++;
if (numAct == imagenes.length)
numAct = 0;
tempo = setTimeout('mostrarImg()', 8000)
}
<
/script>
......
<
body onload="tempo = setTimeout( 'mostrarImg( )', 8000)">
<
img src="diap0.jpg">
Como vemos la diferencia estriba en que el evento setTimeout se vincula en
cada ejecución de la función temporizada, con lo que se logra
emular el funcionamiento del temporizador cíclico.
|
