Redimensionar y setTimeout

kavalerian · #1 (**permalink**) 04/06/2005, 02:20

Hola a todos.
Vereis tengo un problema, estoy intentando redimiensionar una imagen, pero que esta se haga de poco en poco y para eso quiero que lo haga segun un intervalo de tiempo. Para ello utilizo el siguiente codigo:

function camb_imag()
{for (i=0; i<10; i++)
setTimeout(tiempo, 1000);
}
function tiempo()
{
document.imagen.width=document.imagen.width+i;
}

La cuestion es que lo hace, pero no como yo quiero pues primero hace el for hasta 10 y despues llama a la funcion para modificar el tamaño. Lo que a mi me gustaria que hiciera seria que cada vez de "i" llamara a la funcion como creo que deberia ser conforme lo que esta escrito.
Alguien me puede echar una mano?
Muchas gracias

JavierB · #2 (**permalink**) 04/06/2005, 02:36

Hola kavalerian

Intentalo de esta forma:

Código PHP:

  i=0; 
function camb_imag() { 
  document.imagen.width=document.imagen.width+i; 
  i++; 
  if (i<10) setTimeout(tiempo, 1000); 
}

Espero que te sirva. Saludos,

caricatos · #3 (**permalink**) 04/06/2005, 02:44

Hola a todos:

Los parámetros de setTimeout son un texto (cadena) y un número...

tiempo es una función, así que no va a funcionar como lo haces (ni como lo hace JavierB) ...

setTimeout("tiempo()", 1000);

pero como puedes pasar parámetros lo mejor sería algo así:

function camb_imag() {
setTimeout("tiempo(0)", 1000);
}
function tiempo(i) {
document.imagen.width=document.imagen.width+1;
if (i++ < 10) setTimeout("tiempo(" + i + ")", 1000);
}

Saludos

JavierB · #4 (**permalink**) 04/06/2005, 02:49

¡Oops! Me he confundido por abusar del copy&paste (gracias por el toque caricatos

)

Mi código debería quedar así:

Código PHP:

   i=0; 
function camb_imag() { 
  document.imagen.width=document.imagen.width+i; 
  i++; 
  if (i<10) setTimeout('camb_imag()', 1000); 
}

Saludos,

caricatos · #5 (**permalink**) 04/06/2005, 03:01

Hola Javi:

Me parece que tampoco sería buena idea, ya que el bucle se hace inmediatamente, entonces el retraso inicial es el unico que se notaría...

Otra forma de usar el bucle es darle valores al retraso de esta manera:

for (i = 0; i < 10; i ++)
setTimeout("tiempo()", 1000 * i);

También se podría introducir el valor de i en la llamada como puse antes.

Saludos

JavierB · #6 (**permalink**) 04/06/2005, 03:16

Hola caricatos

Lo que he hecho es prescindir del bucle y de la función tiempo(), juntandolo todo en la función camb_imag(). La verdad es que en los primeros mensajes he contestado de memoria (de ahí también los fallos), pero ahora lo he probado y me ha funcionado bien.

Saludos,

caricatos · #7 (**permalink**) 04/06/2005, 03:51

Hola otra vez:

Si bien funciona, me parece que lo hace de una forma que no es la esperada:

Hice este código con las 3 opciones:

Código:

<html>
<head>
<script>
function camb_imag() {
setTimeout("tiempo(0)", 100);
}
function tiempo(i) {
document.imagen.width=document.imagen.width+1;
if (i++ < 10) setTimeout("tiempo(" + i + ")", 100);
}
function tiempo2() {
document.imagen.width=document.imagen.width+1;
if (i++ < 10) setTimeout("tiempo2(" + i + ")", 100);
}
function camb_imag3() {
for (i = 0; i < 10; i ++)
setTimeout("tiempo2()", 100 * i);
}

i=0; 
function camb_imag2() { 
  document.imagen.width=document.imagen.width+i; 
  i++; 
  if (i<10) setTimeout('camb_imag2()', 100); 
} 

</script>
</head>
<body>
<img src="../miemoticon.gif" name="imagen" />
<input type="button" onclick="camb_imag()" value="probar"/>
<input type="button" onclick="i = 0; camb_imag2()" value="probar2"/>
<input type="button" onclick="i = 0; camb_imag3()" value="probar3"/>
</body>
</html>

Puedes copiarlo y pegarlo directamente en mi probador: http://www.pepemolina.com/probador/index.html

El botón probar2 es tu implementación y los otros son las 2 implementaciones que planteé. El efecto es menos progresivo...

Bueno. Curiosidades.

Saludetes

caricatos · #8 (**permalink**) 04/06/2005, 04:58

Hola otra vez:

Ya he visto la diferencia...

Yo hacía el incremento en 1 y tú (JavierB) incrementas en el valor de i (1..10)

Saludos

kavalerian · #9 (**permalink**) 04/06/2005, 05:43

Perfecto, muchas gracias a los dos.
Ya lo tengo claro y sale perfectamente.