[SOLUCIONADO] Anidamiento de setInterval/setTimeout ¿es posible?

[Profesor_Lambetain]

Hola al foro:

Mi problema es cambiar cada 1 segundo una imagen (.JPG) en una celda de tabla, mientras se dé una determinada condición, imagen que actúa como botón/enlace para realizar una acción. Estas imágenes tienen la misma leyenda ("Fotoshow OFF") pero diferente color de fondo (la permutación de imágenes es para llamar la atención del usuario de que tiene una función activada, pero esto no hace al problema).

He intentado de varios modos, pero el que me parece más limpio y lógico es anidar un setTimeout dentro de un setInterval, con el siguiente código:

Código HTML:

...
var control1, control2;
control1=window.setInterval("if(document.forms[0].elements[10].value==1){document.images[1].src='FotoshowOFF.jpg';control2=window.setTimeout("document.images[1].src='FotoshowOFF-2.jpg';",1000)}else{clearInterval(control1);clearTimeout(control2);}",2000);
...

... pero... ¡ esto no funciona, y no puedo encontrar la razón !

La acción debe de ser ejecutada en segundo plano (por ello recurrí a setInterval/setTimeout), ya que la página debe realizar otras acciones mientras la permutación de imágenes se esté ejecutando. Por tanto, supongo que iteraciones con for, do/while, while, quedan excluidas.

¿Alguno de vosotros puede arrojar un poco de luz sobre este tema?

Gracias anticipadas.

[ocp001a]

¿Conoces la diferencia entre settimeout y setinterval?

anidarlos no creo que sea buena idea.

Si lo que quieres es llamar la atención con una imagen, podrías hacer uso de clases css con animación, si se cumple la condición, usas la clase animada, si no, usas la clase "normal", esto podría hacerse usando setinterval si ser necesario el timeout.

O bien quizá no entendí bien la finalidad de lo que quieres lograr.

[chuidiang]

Hola:

Podrías poner el código en varias líneas y sangrado, así es difícil de verlo.

setTimeout admite una función, no estoy seguro de que funcione poniendo entre comillas directamente código javascript.

No sé si tu intención es alternar imágenes, pero para eso no necesitas algo tan complejo, basta un setInterval que cada vez que se llame cambie la imagen. Guarda "algo" que te indique que imagen tienes en una variable y solo tienes que hacer un if de esa variable para decidir que imagen toca vez.

Código Javascript:

imagen=1;
setInterval (function() {
   if (imagen==1) {
         // pon la imagen 2 en el boton
         imagen = 2;
   } else { 
         // pon la imagen 1 en el boton
         imagen = 1;
   }
}, 1000);
 

Se bueno.

[Profesor_Lambetain]

Gracias por tu respuesta ocp001a.

Creo saber la diferencia entre ambos métodos. Ateniéndome a sus definiciones, creo que mi instrucción debería funcionar. ¿Por qué dices que no sería buena idea anidarlas?

Como está concebida la instrucción, la imagen FotoshowOFF.jpg debería mostrarse a los 2, 4, 6... seg, y la FotoshowOFF-2.jpg a los 3, 5, 7... seg. Esto es, se deberían permutar cada 1 seg.

Yo soy un novato en esto, y no conozco qué es CSS con animación. Me pondré a ello.

La finalidad de hacer lo que pretendo es que el usuario puede activar una función de presentación de fotos en una ventana emergente (con la finalidad de ampliar las fotos x4 con relación a su tamaño en un cuadro de visualización) mediante ese botón que es una imagen que dice "Fotoshow ON". Pero, cuando quiere cerrar esa ventana emergente, si lo hace con el botón de cierre de Windows, esa función de presentación en la ventana emergente sigue activada hasta que no pulse el nuevo botón/imagen "Fotoshow OFF". Y es ésta la imagen/botón que quiero que llame su atención, mediante el cambio de su color de fondo cada segundo (efecto de "titilado"). Pues, si no pulsa esta imagen/botón, al seguir activada esa función de presentación, el pop-up le puede reaparecer en cualquier momento de forma imprevista al usuario, dependiendo de acciones que éste realice.

[emprear]

Primero tenés que solucionar lo graves errores de sintáxis
fijate

Código:

window.setInterval("if(document.forms[0].elements[10].value==1){document.images[1].src='FotoshowO
 

No estás llamando una función o ejecutando una en el setInterval, estás escribiendo una cadena "código".... Que efecto querés lograr, no me queda claro, por lo pronto una estructura correcta sería

Código HTML:

<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
 
var timer =setInterval(function(){
if(document.getElementById('campo').value=='1'){
console.log('El valor de campo es 1');
}else if(document.getElementById('campo').value=='5'){
clearTimeout(timer);
console.log('timer detenido');
 
}else{
console.log('El valor de campo es distinto de 1 y de 5');
}
}, 3000);
 
}
//]]>
</script>
</head>
<body>
<input type="text" value="" id="campo">
</body>
</html>
 

ó si lo preferís

Código Javascript:

setTimeout(function() { Timer = setInterval(fnc, 100); }, 1000);
 
function fnc(){
console.log('ejecutando funcion fnc');
}
 

Es decir, tener definida la función en otra parte

Saludos

[Profesor_Lambetain]

Iniciado por chuidiang

Hola:

Podrías poner el código en varias líneas y sangrado, así es difícil de verlo.

setTimeout admite una función, no estoy seguro de que funcione poniendo entre comillas directamente código javascript.

No sé si tu intención es alternar imágenes, pero para eso no necesitas algo tan complejo, basta un setInterval que cada vez que se llame cambie la imagen. Guarda "algo" que te indique que imagen tienes en una variable y solo tienes que hacer un if de esa variable para decidir que imagen toca vez.

Código Javascript:

imagen=1;
setInterval (function() {
   if (imagen==1) {
         // pon la imagen 2 en el boton
         imagen = 2;
   } else { 
         // pon la imagen 1 en el boton
         imagen = 1;
   }
}, 1000);
 

Se bueno.

Gracias chiudiang.

Bueno, ahora me pones en la duda de si se puede poner código JS directamente en el primer argumento del setInterval/setTimeout (¡ es que soy novato, ja, ja !): yo creo que sí, es una lista de acciones que se deben realizar cuando se cumpla el set de tiempo que se fija como segundo argumento de la instrucción. Quiero decir que no necesariamente debe de ser una llamada a función ese primer argumento.

Te pongo el código separado como lo pides... ¡ pero es que es una única instrucción setInterval ! :

Código:

var control1, control2;
control1=window.setInterval("
if(document.forms[0].elements[10].value==1) {
         document.images[1].src='FotoshowOFF.jpg';
         control2=window.setTimeout("document.images[1].src='FotoshowOFF-2.jpg';",1000)
} else {
         clearInterval(control1);
         clearTimeout(control2);
}
",2000);

(sorry, pero no sé cómo se usa el indentado/envoltorio de código, en este caso)

Dices bien: mi intención es alternar dos imágenes .JPG iguales pero de diferente color de fondo (mientras se dé una determinada condición que es testeada por el if).
También llevas razón cuando dices que "guarde algo": podría abrir un nuevo campo hidden en el formulario que indique si la imagen presentada es una u otra, y actuar con el setInterval en consecuencia... pero no quisiera complicar más el formulario... es... una cuestión de "orgullo de programador" lo mío, si lo quieres ver así. En otras palabras: si mi instrucción no funciona, quiero saber por qué razón no funciona. Pero bueno, me pongo a ello (a definir un campo hidden).

Gracias nuevamente.

[Profesor_Lambetain]

Iniciado por emprear

Primero tenés que solucionar lo graves errores de sintáxis
fijate

Código:

window.setInterval("if(document.forms[0].elements[10].value==1){document.images[1].src='FotoshowO
 

No estás llamando una función o ejecutando una en el setInterval, estás escribiendo una cadena "código".... Que efecto querés lograr, no me queda claro, por lo pronto una estructura correcta sería

Código HTML:

<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
window.onload = function(){
 
var timer =setInterval(function(){
if(document.getElementById('campo').value=='1'){
console.log('El valor de campo es 1');
}else if(document.getElementById('campo').value=='5'){
clearTimeout(timer);
console.log('timer detenido');
 
}else{
console.log('El valor de campo es distinto de 1 y de 5');
}
}, 3000);
 
}
//]]>
</script>
</head>
<body>
<input type="text" value="" id="campo">
</body>
</html>
 

ó si lo preferís

Código Javascript:

setTimeout(function() { Timer = setInterval(fnc, 100); }, 1000);
 
function fnc(){
console.log('ejecutando funcion fnc');
}
 

Es decir, tener definida la función en otra parte

Saludos

Bueno, al parecer llevas razón: el primer argumento del setInterval debe ser una función:
(sacado de [URL="http://pmblog.metroblog.com/setinterval"]http://pmblog.metroblog.com/setinterval[/URL] ):

Es importante tener en cuenta que la porción de código que ejecutemos debe estar comprendida DENTRO DE UNA FUNCION. En otras palabras, el setInterval() ejecuta funciones cada X lapso de tiempo.

Sin embargo, pon un alert() como primer argumento de un setInterval/setTimeout, y funciona, siendo que alert es un método del objeto window. Bueh... no deja de ser una función.

Me pongo a: definir una función aparte, la que invocaré en el setInterval. Dicha función discriminará qué imagen está siendo visualizada en ese momento (para ello, como sugería chiudiang, abriré un nuevo campo hidden).

Muchas gracias emprear.

[Profesor_Lambetain]

Agradezco a los foreros que tan amablemente han contribuido a que aclare mi conocimiento.

Para los que os interesásteis por este hilo en segundo plano:

CONCLUSIONES:

1. No he podido encontrar un caso de setInterval, con un setTimeout como primer argumento, que funcione. De lo que se deduciría que no se pueden anidar.

2. El primer argumento de setInterval y setTimeout debe ser la llamada a una función. Sin embargo, cuando se indica como primer argumento una simple instrucción (una sola), ésta se ejecuta (probar poner un alert(), o una como ésta:

setInterval("document.images[1].src='FotoshowOFF-2.jpg'",1000);

... y funcionarán).

3. Mi fallo original no estaba en si se podían o no anidar setInterval y setTimeout (que también), sino en el falso concepto de creer que el primer argumento de estas funciones puede ser una serie de dos o más instrucciones de código.

[chuidiang]

Hola:

Una cosa nada más. Si no estás recargando la página, no necesitas un atributo hidden, te basta una variable javascript declarada fuera de la función, para que no se inicialice cada vez que se llama a la función, pero que sea accesible dentro de esta.

Y si estás recargando la página, tampoco te haría falta el hidden, la nueva página recargada podría empezar con cualquier imagen. Si no eres muy perfeccionista, no tiene importancia que al recargar la página siga con la figura que le toca, vale perfectamente que vuelva a empezar con la primera imagen.

Se bueno.

[Profesor_Lambetain]

Iniciado por chuidiang

Hola:

Una cosa nada más. Si no estás recargando la página, no necesitas un atributo hidden, te basta una variable javascript declarada fuera de la función, para que no se inicialice cada vez que se llama a la función, pero que sea accesible dentro de esta.

Y si estás recargando la página, tampoco te haría falta el hidden, la nueva página recargada podría empezar con cualquier imagen. Si no eres muy perfeccionista, no tiene importancia que al recargar la página siga con la figura que le toca, vale perfectamente que vuelva a empezar con la primera imagen.

Se bueno.

Llevas toda la razón, muchas gracias.

Esto funciona tal y como yo quería (defino una función, changeimage(h), auxiliar):

Código:

...
h=1;
control=setInterval("h=changeimage(h);",1500);
...

function changeimage(h) {
	if(h==1 && document.forms[0].elements[10].value==1) {
		document.images[1].src="FotoshowOFF-2.jpg";
		h=2;
		return h;
	} else if(h==2 && document.forms[0].elements[10].value==1) {
		document.images[1].src="FotoshowOFF.jpg";
		h=1;
		return h;
	} else {
		clearInterval(control);
	}
}

Y no necesité "ensuciar" la estructura del código con campos de señales.

[OFF Topic] Disculpa por "haberte rebautizado" como chiudiang, chuidiang... mi fuerte no es el chino... y yo ya estoy teniendo un poco de "dislexia codificadora", ja, ja. [/OFF]

[caricatos]

Hola:

Viendo el código me parece que es demasiado extenso... además, si terminar la temporización solo depende del campo del formulario, con una sola condición bastaría; y poner argumento a la función no parece buena idea... otra cosa, los campos de formulario son cadenas y no números, así que lo correcto es entrecomillarlo (aunque evidentemente pueda parecer innecesario):

Código:

h = 0;
fotos = ["FotoshowOFF.jpg" ,"FotoshowOFF-2.jpg"];
function changeimage() {
	if(document.forms[0].elements[10].value != "1")
		clearInterval(control)
	else
		document.images[1].src=fotos[++h % 2];
}
control = setInterval(changeimagen, 1500);

Te comento la idea:

No parece que importe entre alternar 1 y 2 o entre 0 y 1; además, si dividimos cualquier número entre 2, obtendremos dos posibles valores: 0 y 1; así que ¿por qué no, tan solo incrementamos un número entre 2 y rescatamos el resto y lo usamos para obtener uno de los dos valores de un array de dos elementos...

Fíjate sobre todo en la idea de usar menos condiciones.

Saludos

[Profesor_Lambetain]

Iniciado por caricatos

Hola:

Viendo el código me parece que es demasiado extenso... además, si terminar la temporización solo depende del campo del formulario, con una sola condición bastaría; y poner argumento a la función no parece buena idea... otra cosa, los campos de formulario son cadenas y no números, así que lo correcto es entrecomillarlo (aunque evidentemente pueda parecer innecesario):

Código:

h = 0;
fotos = ["FotoshowOFF.jpg" ,"FotoshowOFF-2.jpg"];
function changeimage() {
	if(document.forms[0].elements[10].value != "1")
		clearInterval(control)
	else
		document.images[1].src=fotos[++h % 2];
}
control = setInterval(changeimagen, 1500);

Te comento la idea:

No parece que importe entre alternar 1 y 2 o entre 0 y 1; además, si dividimos cualquier número entre 2, obtendremos dos posibles valores: 0 y 1; así que ¿por qué no, tan solo incrementamos un número entre 2 y rescatamos el resto y lo usamos para obtener uno de los dos valores de un array de dos elementos...

Fíjate sobre todo en la idea de usar menos condiciones.

Saludos

Gracias Caricatos.

Bien, tu código (que transcribo adaptado) funciona OK:

Código:

function fotosbig() { // Función que, entre otras muchas cosas, llama a changeimage().
.....
...
h=0;
fotos=new Array("FotoshowOFF.jpg","FotoshowOFF-2.jpg");
control=setInterval("changeimage();",1500);
.....
...
} // Fin función fotosbig.

function changeimage() {
	if(document.forms[0].elements[10].value!="1") {
		clearInterval(control);
	} else {
		document.images[1].src=fotos[++h % 2];
	}
} // Fin función changeimage.

... y es más corto porque tiene menos instrucciones y menos condiciones en el condicional, pero a cambio utiliza una variable más: el vector fotos(2).

Ahora bien, hay unas cositas que no entiendo en tu código:

1. Si no transfiero parámetros/variables entre la función original de llamada (fotosbig): ¿cómo se entera la función invocada (changeimage) de la existencia de la variable "control"? ¿O es que las variables asociadas a métodos del objeto window (setInterval en este caso) están accesibles a todo el código?

2. De igual modo: ¿cómo se entera la función invocada (changeimage) de la existencia y valor de la variable h en cada invocación?

[OFF Topic] Quizás tú, sin saberlo, me has dado inmensa luz al decirme que "... otra cosa, los campos de formulario son cadenas y no números, así que lo correcto es entrecomillarlo"... no te puedes imaginar los dolores de cabeza que me ha ocasionado este desconocimiento... virguerías hube de hacer con los métodos String, Number, parseInt. MUCHAS GRACIAS, caricatos. [/OFF]

[Profesor_Lambetain]

Iniciado por Profesor_Lambetain

...

Ahora bien, hay unas cositas que no entiendo en tu código:

...

Vale, un repasito hecho a la teoría sobre ámbito y alcance de las variables en funciones, y dudas solventadas. Gracias a todos.

[Profesor_Lambetain]

Iniciado por caricatos

Hola:

Viendo el código me parece que es demasiado extenso... además, si terminar la temporización solo depende del campo del formulario, con una sola condición bastaría; y poner argumento a la función no parece buena idea... otra cosa, los campos de formulario son cadenas y no números, así que lo correcto es entrecomillarlo (aunque evidentemente pueda parecer innecesario):

Código:

h = 0;
fotos = ["FotoshowOFF.jpg" ,"FotoshowOFF-2.jpg"];
function changeimage() {
	if(document.forms[0].elements[10].value != "1")
		clearInterval(control)
	else
		document.images[1].src=fotos[++h % 2];
}
control = setInterval(changeimagen, 1500);

Te comento la idea:

No parece que importe entre alternar 1 y 2 o entre 0 y 1; además, si dividimos cualquier número entre 2, obtendremos dos posibles valores: 0 y 1; así que ¿por qué no, tan solo incrementamos un número entre 2 y rescatamos el resto y lo usamos para obtener uno de los dos valores de un array de dos elementos...

Fíjate sobre todo en la idea de usar menos condiciones.

Saludos

Sólo un detalle de purista: con tu código (que es el que adoptaré porque es el más "económico" en recursos) el valor del contador/variable h aumenta indefinidamente hasta que el usuario desactive la función de intercambio de botones, o cierre la página. Hombre, no es que esto vaya a producir un "overflow" ni en muchos milenios... pero para ser perfeccionista ¡está el mundo lleno de novatos como yo! ja, ja.

[caricatos]

Hola:

Iniciado por Profesor_Lambetain

Sólo un detalle de purista...

Para puristas...

document.images[1].src=fotos[(h % 2 == 0)? ++h:--h];// h valdrá 0 o 1

Hay más alternativas como rotaciones de bits, otras operaciones lógicas, imágenes gif animadas o svg...

Me gusta encontrarme con puristas... ¡Ja,ja!

Saludos

[Profesor_Lambetain]

Iniciado por caricatos

Hola:



Para puristas...

document.images[1].src=fotos[(h % 2 == 0)? ++h:--h];// h valdrá 0 o 1

Hay más alternativas como rotaciones de bits, otras operaciones lógicas, imágenes gif animadas o svg...

Me gusta encontrarme con puristas... ¡Ja,ja!

Saludos

¡Perfecto! Muchas gracias (yo no me hubiera dado cuenta... o lo habría solucionado complicando el código).

Y a mí me gusta encontrarme con gente que, cada vez que abre la boca, es para enseñar o ayudar a los demás... y de gratis, que eso no abunda precisamente en nuestro mundo!