Problema con setTimeout en Firefox

david_celta · #1 (**permalink**) 22/11/2008, 19:48

Hola, tengo un pequeño problemita con esa función en Firefox.

La función F definida en el script realiza algo como esto:

-----------
X = obtener un objeto mediante su id (getElementById)
Y = obtener el primer objeto hijo del objeto X (firstChild)
quitar el objeto Y de X (removeChild)
agregar el objeto Y a X (appendChild) // esto produce un efecto de cola circular
setTimeout ("la misma funcion", algun_tiempo_despues)
------------

Y esto funciona correctamente en IE7, Safari y Firefox, que son los que estoy utilizando para probar el script. Pero en Firefox ocurre un pequeño problema: Toda la página se pone "lenta" mientras esté cerca de la zona donde se está ejecutando el código javascript (si hago scroll vertical hacia abajo la página funciona correctamente). En los otros dos navegadores no existe ese problema.

Alguien tiene idea de ¿por qué ocurre esto?

Datos extras:
- Los objetos hijos son imágenes
- El tiempo es de 600 milisegundos

Gracias por sus respuestas.

Fernand0 · #2 (**permalink**) 22/11/2008, 20:00

Porque estas ejecutando un NUEVO setTimeout cada vez que ejecutas la funcion.. por tanto tenes varios setTimeout y eso te alentiza todo... a menos que lo hayas condicionado... pero como no pegas la funcion no te se decir.. me baso en lo que mostras..

David · #3 (**permalink**) 22/11/2008, 20:08

Hola, Fernand0, creo que el propósito de setTimeout (no setInterval) en este caso es que al terminar de ejecutar la función, lo vuelva a ejecutar transcurridos X miliseg., dependiendo del tiempo en milisegundos y de la acción que se realice no es muy bueno, pero depende del caso. Concuerdo contigo en que habrá que ver el código real implicado para saber qué está pasando.

david_celta · #4 (**permalink**) 22/11/2008, 20:42

El código es exactamente ese, bueno en javascript es así:

pop()
{
i=tag('x').getElementsByTagName('img')[0];
tag('x').removeChild(i);
tag('x').appendChild(i);
c=setTimeout("pop()",600);
}

Me pregunto porque cuando la página no está visualizando la zona del script, no pasa nada, todo funciona correctamente, si el script se sigue ejecutando debería seguir lenta en cualquier parte de la página. He pensado que es algo de firefox porque lo acabo de probar en Opera y en Chrome y funciona correctamente, igual que en IE y Safari, y cuatro contra uno creo que es suficiente como para pensar que el problema es ese navegador llamado firefox.

David · #5 (**permalink**) 22/11/2008, 20:52

¿Y por qué eso de agregar y quitar el elemento a cada 600 miliseg.?

.
Bueno, yo probé con Firefox, con una imagen cualquiera y no logré reproducir el problema que mencionas. ¿Podrías subir tu página en alguna parte para que la veamos?.

david_celta · #6 (**permalink**) 22/11/2008, 20:54

Lo de quitar y poner es para producir un efecto de cola circular, si quito el primer elemento y luego lo pongo, sale de la primera posicion y se agrega a la ultima, de esta manera las imagenes parecen desplazarse hacia la izquierda cada cierto tiempo

A B C D

quito A

B C D

agrego A

B C D A

¿ves?

Panino5001 · #7 (**permalink**) 22/11/2008, 20:55

Por lo que mencionás del efecto cola circular, seguramente no es el código completo que estás usando. Además, te convendría quitar el paréntesis y las comillas en el llamado a la función dentro del setTimeout para mejorar el rendimiento.
Edito: lo escribí antes de tu último mensaje.

Panino5001 · #8 (**permalink**) 22/11/2008, 21:03

Lo probé así en Firefox y funciona perfectamente:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Documento sin t&iacute;tulo</title> 
 
</head> 
 
<body> 
<div id="x" ><img src="rotate/uno.jpg" width="315" height="210" /> <img src="ADELA/58fb360c453ab902b4a890a7ec0b151ddp-vacaciones.jpg" width="393" height="220" /><img src="ADELA/977954219f9b57750ffbd43dd5a94191dp-clarin.jpg" width="152" height="220" /><img src="ADELA/c5f9ec5a3a4efd63047d6de4b332b2cddp-catalogo-1.jpg" width="309" height="220" /></div> 
<script> 
function tag(id){return document.getElementById(id);} 
function pop() 
{ 
i=tag('x').getElementsByTagName('img')[0]; 
tag('x').removeChild(i); 
tag('x').appendChild(i); 
c=setTimeout(pop,600); 
} 
pop(); 
</script> 
</body> 
</html>

Por cierto, buen truco ;)

Panino5001 · #9 (**permalink**) 22/11/2008, 21:07

Una mejora:

Código PHP:

  function pop() 
{ 
i=tag('x').getElementsByTagName('img')[0]; 
tag('x').removeChild(i); 
tag('x').appendChild(i); 
i=null;//mejora el rendimiento 
c=setTimeout(pop,600); 
}

david_celta · #10 (**permalink**) 22/11/2008, 21:27

Por alguna extraña razón, sólo funciona correctamente (lo habia probado así por separado en una página aparte sin el resto de la página y funcione bien en todos los navegadores), pero con el resto del contenido de la página (que no es mucho pero es dinámico y asíncrono con php y mysql para jalar un par de datos por ahora, luego serían más datos) ya no funciona correctamente. Salvo que sea por otra parte del código de la página (aunque no hay ningun otro timeout ni interval, solo son tags html y textos) hasta ahora firefox es el único que me dá ese problema, en los demás funciona correctamente. Es extraño. No es que se ralentice al punto de no poder navegar, se puede navegar pero se nota el retraso al mover el ratón, al colocars sobre un link (te situas y despues de un tiempo pequeño se pinta recien el link cuando deberia hacerlo inmediatamente como en los otros navegadores) y cosas así, básicamente.

david_celta · #11 (**permalink**) 22/11/2008, 21:36

Otra cosa, y esto tambien pasa solo en firefox (con todo el contenido):

Empieza asi:

A B C D

Luego se queda asi

B B C D (la imagen que esta despues de la que saque se ve duplicada)

Y luego recien queda

B C D A

Y asi sucesivamente, siempre se ve por un pequeño instante la primera imagen duplicada en las posiciones 1 y 2

Es como si al hacer el cambio (remover y agregar) volviera a recargar la imagen que va a circular y eso ocasionaría el retraso, pero no estoy seguro que sea eso.

¿Alguna idea?

David · #12 (**permalink**) 22/11/2008, 21:45

Interesante el efecto

.

Ahora, el por qué sucede eso que mencionas... ¿qué tal si subes tu página y colocas un enlace?. Así será más fácil ver de qué va el error.

Fernand0 · #13 (**permalink**) 22/11/2008, 23:10

Alucine pido disculpas..

#14 (**permalink**) 23/11/2008, 02:57

1. ¿De qué tamaño son las imágenes que usas y cuántas hay?
2. ¿Es necesario que sea cada 600ms? ¿Has probado con 900ms, por ejemplo? ¿Mejora o sigue igual?
3. ¿Dentro de qué tipo de bloques está metido el <div id="x"> en el caso real?

caricatos · #15 (**permalink**) 23/11/2008, 03:25

Hola:

Lo que veo es que intentas añadir un elemento eliminado... supongo que deberías hacer una copia...

function pop()
{
i=tag('x').getElementsByTagName('img')[0];
copia_i = i.cloneNode(true);
tag('x').removeChild(i);
tag('x').appendChild(copia_i);
c=setTimeout(pop,600);
}

Dinos si te vale...

Saludos

Panino5001 · #16 (**permalink**) 23/11/2008, 05:55

Con Firefox 3 y con las imágenes con que probé no veo ese defecto. Y como existe una referencia hacia el objeto dentro del mundo javascript, aunque se elimine del mundo DOM no hace falta clonarlo para volver a introducirlo (aunque en Explorer y con campos de formulario a veces sea necesario). Creo que los problemas tienen que ver con el resto del código de la página o con el peso y la cantidad de imágenes.

caricatos · #17 (**permalink**) 23/11/2008, 09:01

Hola:

¡No sé, no sé...!

Sin un var por delante esa variable "i" creo que debe considerar un alias. o sea una forma de simplificar la referencia, y al eliminarla, simplemente deja de existir (null... undefined...)

Saludos

Panino5001 · #18 (**permalink**) 23/11/2008, 09:11

Sí, lo correcto es que sea local, pero fijate que luego de remover el objeto del DOM, el tipo de la variable sigue siendo object:

Código PHP:

  function pop() 
{ 
i=tag('x').getElementsByTagName('img')[0];//más correcto: var i=... 
tag('x').removeChild(i); 
alert(typeof i) 
tag('x').appendChild(i); 
i=null; 
c=setTimeout(pop,3000); 
} 
pop(); 
</script>

caricatos · #19 (**permalink**) 23/11/2008, 09:30

Hola: (¿Como estás, Andrés...?)

Hace unos años (2 o 3 no más) se me ocurrió simular el estilo z-index, cambiando de sitio algunos elementos... iba a postearlo con el mensaje anterior, pero como me suele pasar, "se me fué la olla"..., pero urgué un poco en mi "machine" y pongo el código...

Código:

<html>
<head>
<title>
	Clonación
</title>
<script type="text/javascript">
function sube(que) {
	var nuevo = que.cloneNode(true);
	que.parentNode.appendChild(nuevo);
	que.parentNode.removeChild(que);
}
</script>
</head>
<body >
<div id="contenedor" style="position: relative; height: 200px">
<div id="amarillo" style="width: 120px; height: 120px; background-color: yellow; position: absolute; top: 5px; left: 5px; border: 1px solid black" onclick="sube(this)"></div>
<div id="rojo" style="width: 120px; height: 120px; background-color: red; position: absolute; top: 35px; left: 35px; border: 1px solid black" onclick="sube(this)"></div>
<div id="azul" style="width: 120px; height: 120px; background-color: blue; position: absolute; top: 65px; left: 65px; border: 1px solid black" onclick="sube(this)"></div>
</div>
</body>
</html>

La simplicidad del método "sube", y ver que funcionaba en todos los navegadores me pareció ideal... creo que no hice muchas pruebas, porque no era necesario, pero me parece que probé el código sin clonarlo y era insuficiente... no lo recuerdo, pero como dije antes, que nos comente sus conclusiones david (lo dije, o no lo dije... that is yhe cuestion!...)

Saludos

david_celta · #20 (**permalink**) 23/11/2008, 17:00

Las imágenes tienen tamaño variable (la más grande es de 473x640 y tiene diferente formato), el "css" se encarga de ponerlas al mismo tamaño en la página. No he pensado que sea eso, pero probaré a ponerlas todas en el mismo formato y tamaño y veré que sucede. El toal de imágenes es 9.

El tiempo lo dejé en 600 porque así me parece a mí que se ve bien en la página, lo había puesto en más pero se ve igual y en menos tiempo se pasa muy rápido en los otros navegadores y no visualizo bien la imagen, en firefox el problema sigue igual.

El div está dentro de otros divs (unos 5 o 6 contando desde el div superior) y dentro de el unicamente contiene a las imagenes. Paralelo a él hay dos divs más por ahora.

Sobre la variable, está declarada asi dentro de la función (no está en el código anteriormente publicado porque eso lo escribí aquí mismo y no lo copié del archivo):

var i;

El código exacto es este:
---------
function moverImagenes ()
{
var imagen = objeto("slideInterno").getElementsByTagName("img")[0];
objeto("slideInterno").removeChild (imagen);
objeto("slideInterno").appendChild (imagen);
imagen = null;
control = setTimeout ("moverImagenes()", 600);
}
--------
Lo de imagen = null se lo agregué según la sugerencia que me dió Panino

Probé lo de clonar y sigue igual.

Y sobre el resto del contenido, ¿por qué debería afectar? Sólo es en firefox donde se ve mal, si se viera bien sólo en IE y mal en los demás, entonces es probable que sea culpa de IE (¿?), pero si ve bien en 4 navegadores (ie, safari, opera y chrome) y mal en Firefox ¿es culpa de firefox?. ¿Al menos del que yo tengo, que por cierto ayer me dijo que se había actualizado?. ¿Habrá que reinstalarlo?

david_celta · #21 (**permalink**) 23/11/2008, 17:25

A ver, acabo de probar con otras imágenes (hice dos de tamaño 174x210 y pesan 1.85 y 2.55 kb, fondo blanco con el numero 1 y 2 escrito a mano alzada). Y en el slide he colocado esas dos imágenes nueve veces (es decir 1 2 1 2 1 2 1 2 1). Y funciona correctamente en firefox (y en los demás). También probe con tres de las originales (dos jpg y una png) y el problema seguía, pero cuando puse 3 jpg el problema se mantenía pero parecía haber disminuidio un poco la lentitud (o quizá sólo fue impresión mía).

Suponiendo que ese haya sido el problema (lo verificaré cuando coloque las imágenes reales modificadas), ¿por qué con las otras imágenes me pone problema firefox? Obviamente las imágenes son sólo de prueba porque las que estarán cuando la página se termine aún no existen. Siginifica esto que para que este efecto funcione correctamente en firefox ¿obligatoriamente todas las imágenes tienen que ser del mismo tamaño, extensión y forma?

david_celta · #22 (**permalink**) 23/11/2008, 17:49

Bueno, acabo de probar con dos imágenes fullcolor de 150x200 colocándolas nueve veces (igual que el 1 2 1 2... ) y se corrigió el problema del retraso, pero en parte. En firefox sigo viendo que la imagen que elimino se ve duplicada por un pequeño instante (pasa de 1212 a 11212-el primero duplicado por un instante- y luego recien 2121 que sería lo correcto). ¿por qué sucede esto?. es casi imperceptible, pero supongo que si le coloco más imágenes se notará más ¿Alguna idea?