Foros del Web » Programando para Internet » Javascript »

setInterval que se ejecuta sólo 2 veces...

 Estas en el tema de setInterval que se ejecuta sólo 2 veces... en el foro de Javascript en Foros del Web. Hola a todos: (aclaro de entrada que soy novato). Tengo un par de scripts que, supuestamente, deben cambiar las 5 imágenes de una página cada ...
  #1 (permalink)  
Antiguo 13/08/2011, 01:02
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 13 años, 7 meses
Puntos: 1
setInterval que se ejecuta sólo 2 veces...
Hola a todos:
(aclaro de entrada que soy novato).
Tengo un par de scripts que, supuestamente, deben cambiar las 5 imágenes de una página cada X segundos (hay 3 juegos de 5 imágenes c/u que deben ir permutándose entre ellos), entiendo que hasta que se salga de esa página, mediante la instrucción setInterval. Pues bien: esos scripts provocan sólo 2 cambios de imágenes en la página y dejan de hacerlo, quedando las imágenes del 2º cambio sin nuevos cambios posteriores.

Yo entiendo que la sentencia setInterval(xxx,XXXX) se debería ejecutar hasta que se salga de la página o hasta que se encuentre un clearInterval, pero el recambio de imágenes se detiene sin que nada de esto ocurra previamente. ¿Por qué pasa esto?

Quisiera saber también si hay alguna otra forma de ir cambiando las imágenes de la página sin necesidad de recargar la misma ni de hacer "apaños" poco elegantes.

Mi código:

Código HTML:
<SCRIPT TYPE="text/javascript">
// FUNCIÓN 2 DE REEMPLAZO DE IMÁGENES A MOSTRAR.
function change() {
	document.images[0].src=document.forms[0].elements[0].value+".jpg";
	document.images[1].src=document.forms[0].elements[1].value+".jpg";
	document.images[2].src=document.forms[0].elements[2].value+".jpg";
	document.images[3].src=document.forms[0].elements[3].value+".jpg";
	document.images[4].src=document.forms[0].elements[4].value+".jpg";
	if(document.forms[0].elements[0].value==1) {
		document.forms[0].elements[0].value=6;
		document.forms[0].elements[1].value=7;
		document.forms[0].elements[2].value=8;
		document.forms[0].elements[3].value=9;
		document.forms[0].elements[4].value=10;
	} else if (document.forms[0].elements[0].value==6) {
		document.forms[0].elements[0].value=11; 
 		document.forms[0].elements[1].value=12; 
		document.forms[0].elements[2].value=13; 
		document.forms[0].elements[3].value=14; 
		document.forms[0].elements[4].value=15; 
	} else if (document.forms[0].elements[0].value==11) {
		document.forms[0].elements[0].value=1;
		document.forms[0].elements[1].value=2;
		document.forms[0].elements[2].value=3;
		document.forms[0].elements[3].value=4;
		document.forms[0].elements[4].value=5;
	}
	return;
} // Fin function change().
</SCRIPT>

<SCRIPT TYPE="text/javascript">
// FUNCIÓN 1 DE REEMPLAZO DE IMÁGENES A MOSTRAR.
function cambiarImagen() {
	if(document.forms[0].elements[0].value==1) {
		document.forms[0].elements[0].value=6;
		document.forms[0].elements[1].value=7;
		document.forms[0].elements[2].value=8;
		document.forms[0].elements[3].value=9;
		document.forms[0].elements[4].value=10;
	} else if (document.forms[0].elements[0].value==6) {
		document.forms[0].elements[0].value=11; 
		document.forms[0].elements[1].value=12; 
		document.forms[0].elements[2].value=13; 
		document.forms[0].elements[3].value=14; 
		document.forms[0].elements[4].value=15; 
	} else if (document.forms[0].elements[0].value==11) {
		document.forms[0].elements[0].value=1;
		document.forms[0].elements[1].value=2;
		document.forms[0].elements[2].value=3;
		document.forms[0].elements[3].value=4;
		document.forms[0].elements[4].value=5;
	}
	setInterval("change()",5000);
} // Fin function cambiarImagen().
</SCRIPT>

</head>

<body bgcolor="FFFFFF" onLoad="cambiarImagen();">
.....
...
<form>
<tr>
<td>&nbsp;<input type="hidden" VALUE="1" name="0" id="0" /></td> <!-- Campo oculto con valor de foto banner posición 1 -->
<td>&nbsp;<input type="hidden" VALUE="2" name="1" id="1" /></td> <!-- Campo oculto con valor de foto banner posición 2 -->
<td>&nbsp;<input type="hidden" VALUE="3" name="2" id="2" /></td> <!-- Campo oculto con valor de foto banner posición 3 -->
<td>&nbsp;<input type="hidden" VALUE="4" name="3" id="3" /></td> <!-- Campo oculto con valor de foto banner posición 4 -->
<td>&nbsp;<input type="hidden" VALUE="5" name="4" id="4" /></td> <!-- Campo oculto con valor de foto banner posición 5 -->
</tr>
</form>
.....
...
Gracias de antemano.
  #2 (permalink)  
Antiguo 13/08/2011, 07:29
Avatar de laratik  
Fecha de Ingreso: mayo-2010
Ubicación: Cali
Mensajes: 317
Antigüedad: 13 años, 10 meses
Puntos: 63
Respuesta: setInterval que se ejecuta sólo 2 veces...
Hola Profesor_Lambetain ¿Sobre que navegador te ejecuta solo dos veces? he probado tu script en IE9 y Chrome 13, al parecer funciona correctamente pues después de más de un minuto me sigue cambiando de imagen cada 5 segundos. Tambien puedes probar a utilizar recursividad con setTimeout, lo cual lograra un efecto parecido al utilizar setInterval:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. // FUNCIÓN 2 DE REEMPLAZO DE IMÁGENES A MOSTRAR.
  3. function change() {
  4.     document.images[0].src=document.forms[0].elements[0].value+".jpg";
  5.     document.images[1].src=document.forms[0].elements[1].value+".jpg";
  6.     document.images[2].src=document.forms[0].elements[2].value+".jpg";
  7.     document.images[3].src=document.forms[0].elements[3].value+".jpg";
  8.     document.images[4].src=document.forms[0].elements[4].value+".jpg";
  9.     if(document.forms[0].elements[0].value==1) {
  10.         document.forms[0].elements[0].value=6;
  11.         document.forms[0].elements[1].value=7;
  12.         document.forms[0].elements[2].value=8;
  13.         document.forms[0].elements[3].value=9;
  14.         document.forms[0].elements[4].value=10;
  15.     } else if (document.forms[0].elements[0].value==6) {
  16.         document.forms[0].elements[0].value=11; 
  17.         document.forms[0].elements[1].value=12; 
  18.         document.forms[0].elements[2].value=13; 
  19.         document.forms[0].elements[3].value=14; 
  20.         document.forms[0].elements[4].value=15; 
  21.     } else if (document.forms[0].elements[0].value==11) {
  22.         document.forms[0].elements[0].value=1;
  23.         document.forms[0].elements[1].value=2;
  24.         document.forms[0].elements[2].value=3;
  25.         document.forms[0].elements[3].value=4;
  26.         document.forms[0].elements[4].value=5;
  27.     }
  28.     setTimeout(change,5000);
  29. } // Fin function change().
  30. </SCRIPT>
  31.  
  32. <SCRIPT TYPE="text/javascript">
  33. // FUNCIÓN 1 DE REEMPLAZO DE IMÁGENES A MOSTRAR.
  34. function cambiarImagen() {
  35.     if(document.forms[0].elements[0].value==1) {
  36.         document.forms[0].elements[0].value=6;
  37.         document.forms[0].elements[1].value=7;
  38.         document.forms[0].elements[2].value=8;
  39.         document.forms[0].elements[3].value=9;
  40.         document.forms[0].elements[4].value=10;
  41.     } else if (document.forms[0].elements[0].value==6) {
  42.         document.forms[0].elements[0].value=11; 
  43.         document.forms[0].elements[1].value=12; 
  44.         document.forms[0].elements[2].value=13; 
  45.         document.forms[0].elements[3].value=14; 
  46.         document.forms[0].elements[4].value=15; 
  47.     } else if (document.forms[0].elements[0].value==11) {
  48.         document.forms[0].elements[0].value=1;
  49.         document.forms[0].elements[1].value=2;
  50.         document.forms[0].elements[2].value=3;
  51.         document.forms[0].elements[3].value=4;
  52.         document.forms[0].elements[4].value=5;
  53.     }
  54.     change();
  55. } // Fin function cambiarImagen().
  56. </SCRIPT>

Cita:
Iniciado por Profesor_Lambetain Ver Mensaje
Quisiera saber también si hay alguna otra forma de ir cambiando las imágenes de la página sin necesidad de recargar la misma ni de hacer "apaños" poco elegantes.
Pues no se si al momento de decir apaños te refieres a la utilización de inputs type hidden (lo cual me parece muy "chapuza"), pues sin recargar la pagina lo estas haciendo bien al utilizar javascript. Si es a eso a lo que te refieres claro que existe una forma más "elegante" de resolver tu problema:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. function cambiarImagen(i) {
  3.     if(i==15) {
  4.         i = 0;
  5.     }
  6.     document.images.item(0).src = (i+1)+".jpg";
  7.     document.images.item(1).src = (i+2)+".jpg";
  8.     document.images.item(2).src = (i+3)+".jpg";
  9.     document.images.item(3).src = (i+4)+".jpg";
  10.     document.images.item(4).src = (i+5)+".jpg";
  11.     setTimeout(function(){cambiarImagen(i+5)},5000);
  12. }
  13. </SCRIPT>

llamada a la funcion:

Código HTML:
<body bgcolor="FFFFFF" onLoad="cambiarImagen(0);">
o si piensas trabajar con nombres de imágenes en vez de solo números:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. function cambiarImagen(cont) {
  3.     if(cont==3) {
  4.         cont = 0;
  5.     }
  6.     var array;
  7.     if(cont == 0) {
  8.         array=["6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];//la segunda serie, solo cambia el nombre de los archivos a los de las imágenes
  9.     } else if(cont == 1) {
  10.         array=["11.jpg","12.jpg","13.jpg","14.jpg","15.jpg"];//la tercera serie
  11.     } else {
  12.         array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];//la primera serie
  13.     }
  14.     for(var i=0; i<array.length; i++) {
  15.         document.images.item(i).src = array[i];
  16.     }
  17.     setTimeout(function(){cambiarImagen(cont+1)},5000);
  18. }
  19. </SCRIPT>
__________________
Programar apasiona y lo que apasiona es un arte, por lo tanto programar es un arte.

Quiero karma para en mi próxima vida ser un billonario bien dotado con alas.
  #3 (permalink)  
Antiguo 13/08/2011, 10:40
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: setInterval que se ejecuta sólo 2 veces...
Cita:
Iniciado por laratik Ver Mensaje
Hola Profesor_Lambetain ¿Sobre que navegador te ejecuta solo dos veces? he probado tu script en IE9 y Chrome 13, al parecer funciona correctamente pues después de más de un minuto me sigue cambiando de imagen cada 5 segundos. Tambien puedes probar a utilizar recursividad con setTimeout, lo cual lograra un efecto parecido al utilizar setInterval:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. // FUNCIÓN 2 DE REEMPLAZO DE IMÁGENES A MOSTRAR.
  3. function change() {
  4.     document.images[0].src=document.forms[0].elements[0].value+".jpg";
  5.     document.images[1].src=document.forms[0].elements[1].value+".jpg";
  6.     document.images[2].src=document.forms[0].elements[2].value+".jpg";
  7.     document.images[3].src=document.forms[0].elements[3].value+".jpg";
  8.     document.images[4].src=document.forms[0].elements[4].value+".jpg";
  9.     if(document.forms[0].elements[0].value==1) {
  10.         document.forms[0].elements[0].value=6;
  11.         document.forms[0].elements[1].value=7;
  12.         document.forms[0].elements[2].value=8;
  13.         document.forms[0].elements[3].value=9;
  14.         document.forms[0].elements[4].value=10;
  15.     } else if (document.forms[0].elements[0].value==6) {
  16.         document.forms[0].elements[0].value=11; 
  17.         document.forms[0].elements[1].value=12; 
  18.         document.forms[0].elements[2].value=13; 
  19.         document.forms[0].elements[3].value=14; 
  20.         document.forms[0].elements[4].value=15; 
  21.     } else if (document.forms[0].elements[0].value==11) {
  22.         document.forms[0].elements[0].value=1;
  23.         document.forms[0].elements[1].value=2;
  24.         document.forms[0].elements[2].value=3;
  25.         document.forms[0].elements[3].value=4;
  26.         document.forms[0].elements[4].value=5;
  27.     }
  28.     setTimeout(change,5000);
  29. } // Fin function change().
  30. </SCRIPT>
  31.  
  32. <SCRIPT TYPE="text/javascript">
  33. // FUNCIÓN 1 DE REEMPLAZO DE IMÁGENES A MOSTRAR.
  34. function cambiarImagen() {
  35.     if(document.forms[0].elements[0].value==1) {
  36.         document.forms[0].elements[0].value=6;
  37.         document.forms[0].elements[1].value=7;
  38.         document.forms[0].elements[2].value=8;
  39.         document.forms[0].elements[3].value=9;
  40.         document.forms[0].elements[4].value=10;
  41.     } else if (document.forms[0].elements[0].value==6) {
  42.         document.forms[0].elements[0].value=11; 
  43.         document.forms[0].elements[1].value=12; 
  44.         document.forms[0].elements[2].value=13; 
  45.         document.forms[0].elements[3].value=14; 
  46.         document.forms[0].elements[4].value=15; 
  47.     } else if (document.forms[0].elements[0].value==11) {
  48.         document.forms[0].elements[0].value=1;
  49.         document.forms[0].elements[1].value=2;
  50.         document.forms[0].elements[2].value=3;
  51.         document.forms[0].elements[3].value=4;
  52.         document.forms[0].elements[4].value=5;
  53.     }
  54.     change();
  55. } // Fin function cambiarImagen().
  56. </SCRIPT>



Pues no se si al momento de decir apaños te refieres a la utilización de inputs type hidden (lo cual me parece muy "chapuza"), pues sin recargar la pagina lo estas haciendo bien al utilizar javascript. Si es a eso a lo que te refieres claro que existe una forma más "elegante" de resolver tu problema:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. function cambiarImagen(i) {
  3.     if(i==15) {
  4.         i = 0;
  5.     }
  6.     document.images.item(0).src = (i+1)+".jpg";
  7.     document.images.item(1).src = (i+2)+".jpg";
  8.     document.images.item(2).src = (i+3)+".jpg";
  9.     document.images.item(3).src = (i+4)+".jpg";
  10.     document.images.item(4).src = (i+5)+".jpg";
  11.     setTimeout(function(){cambiarImagen(i+5)},5000);
  12. }
  13. </SCRIPT>

llamada a la funcion:

Código HTML:
<body bgcolor="FFFFFF" onLoad="cambiarImagen(0);">
o si piensas trabajar con nombres de imágenes en vez de solo números:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. function cambiarImagen(cont) {
  3.     if(cont==3) {
  4.         cont = 0;
  5.     }
  6.     var array;
  7.     if(cont == 0) {
  8.         array=["6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"];//la segunda serie, solo cambia el nombre de los archivos a los de las imágenes
  9.     } else if(cont == 1) {
  10.         array=["11.jpg","12.jpg","13.jpg","14.jpg","15.jpg"];//la tercera serie
  11.     } else {
  12.         array=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];//la primera serie
  13.     }
  14.     for(var i=0; i<array.length; i++) {
  15.         document.images.item(i).src = array[i];
  16.     }
  17.     setTimeout(function(){cambiarImagen(cont+1)},5000);
  18. }
  19. </SCRIPT>
Muchas gracias laratik. Tu respuesta me ha pillado fuera de mi sitio, ya la analizaré detenidamente, aunque me parace muy interesante.

Mi versión de IE es 6 ó 7. Pensaba que probablemente la interrupción de la ejecución del script sea debida a cierta limitación de mi mismo S.O. en la ejecución de scripts, y ahora que me dices que a tí te funciona en tu IE9 más me haces pensar en esa posibilidad (me refiero a la configuración del S.O. o IE respecto a ejecución de scripts). Pero eso se puede "evitar" engañando al S.O. haciendo una rutina menos elegante.

Con "apaño menos elegante" me refería a, por ejemplo, cargar una página auxiliar y, desde ésta, volver a cargar mi página nuevamente, lo que es un procedimiento que aumenta el tráfico y realmente me parece que debe de haber otra forma de lograr el cometido más "profesional".

Muchas gracias nuevamente.
  #4 (permalink)  
Antiguo 14/08/2011, 03:21
 
Fecha de Ingreso: septiembre-2010
Mensajes: 67
Antigüedad: 13 años, 7 meses
Puntos: 1
Respuesta: setInterval que se ejecuta sólo 2 veces...
Cita:
Iniciado por laratik Ver Mensaje
Hola Profesor_Lambetain ¿Sobre que navegador te ejecuta solo dos veces? he probado tu script en IE9 y Chrome 13, al parecer funciona correctamente pues después de más de un minuto me sigue cambiando de imagen cada 5 segundos. Tambien puedes probar a utilizar recursividad con setTimeout, lo cual lograra un efecto parecido al utilizar setInterval:


Pues no se si al momento de decir apaños te refieres a la utilización de inputs type hidden (lo cual me parece muy "chapuza"), pues sin recargar la pagina lo estas haciendo bien al utilizar javascript. Si es a eso a lo que te refieres claro que existe una forma más "elegante" de resolver tu problema:

Código Javascript: 
Ver original
  1. <SCRIPT TYPE="text/javascript">
  2. function cambiarImagen(i) {
  3.     if(i==15) {
  4.         i = 0;
  5.     }
  6.     document.images.item(0).src = (i+1)+".jpg";
  7.     document.images.item(1).src = (i+2)+".jpg";
  8.     document.images.item(2).src = (i+3)+".jpg";
  9.     document.images.item(3).src = (i+4)+".jpg";
  10.     document.images.item(4).src = (i+5)+".jpg";
  11.     setTimeout(function(){cambiarImagen(i+5)},5000);
  12. }
  13. </SCRIPT>

llamada a la funcion:

Código HTML:
<body bgcolor="FFFFFF" onLoad="cambiarImagen(0);">
Hola laratik: he probado tu script con setTimeout y me funciona perfectamente (en mi IE8, que no ni 6 ni 7). Tu script es, desde luego, más elegante, más conciso, más racional, y no hace uso de formulario con campos hidden como yo había concebido al principio.

Me pregunté si una función podría invocarse a sí misma (recursividad) pero, sin probar la idea, la dejé de lado para no "introducir" otro factor desconocido por mí... otra cosa útil que me has enseñado.

Mil gracias nuevamente.

Etiquetas: ejecuta, setinterval
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 09:16.