Foros del Web » Programando para Internet » Javascript »

Problemas con setTimeout

Estas en el tema de Problemas con setTimeout en el foro de Javascript en Foros del Web. Buenos días a todos. He buscado todos los temas relacionados con setTimeout, y, a menos que me haya saltado algo sin querer, no he encontrado ...
  #1 (permalink)  
Antiguo 22/11/2012, 03:31
Avatar de EriBCN  
Fecha de Ingreso: noviembre-2012
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 10 años, 10 meses
Puntos: 0
Problemas con setTimeout

Buenos días a todos.

He buscado todos los temas relacionados con setTimeout, y, a menos que me haya saltado algo sin querer, no he encontrado nada relacionado con mi problema.

He creado un cronómetro cuenta atrás para aproximar los descansos del personal, que voy a colgar en una web corporativa, y no tengo forma de conseguir que funcione con Firefox. Sin embargo, funciona a la perfección con Internet Explorer.

He estado leyendo muchos temas en otros foros, y hablan de los tipos de variable que se usan y de la forma de declararlas, así como de la forma en que se utiliza el setTimeout.

He probado a cambiar todas las variables a global, para evitar problemas de acceso a estas desde dentro o fuera de la función que controla "el paso del tiempo". El resultado es el mismo.

He probado a definir el setTimeout de todas las maneras que he leido y se me han ocurrido que podrían funcionar, pero la única declaración que ha funcionado es la que os adjunto a continuación, con el resto del código.


Código:
<html>
  <head>

	<script type='text/javascript'>
		horsum=0;
		minsum=0;
		segsum=0;
		
		horvar=0;
		minvar=30;
		segvar=0;
		
		runvar=1;
		toVar;

						
						
		function cdfunc (hora, minu, segu){
			//alert(segu + minu + hora);
			
			if (runvar==1){
			
				if (segu + minu + hora == 0){
						document.getElementById('cronos').innerHTML=segu;
						horvar=horsum;
						minvar=minsum;
						segvar=segsum;
						alert("Has agotado el tiempo!!");
						document.setime.cdgo.disabled=false;
						document.setime.hor.disabled=false;
						document.setime.min.disabled=false;
						document.setime.seg.disabled=false;
						document.setime.resume.disabled=true;
						document.setime.stopped.disabled=true;
						document.getElementById('crono').style.display='none';
						document.getElementById('datos').style.display='';
				}else{
					//alert(hora + minu + segu);
					if (segu<0){
						minu--;
						segu=59;
						if (minu<0){
							hora--;
							minu=59;
						}
						//alert(hora + minu + segu);
					}
				
					//alert(hora);
					
						document.getElementById('cronoh').innerHTML=hora;
					
					//alert(minu);
						document.getElementById('cronom').innerHTML=minu;
					
					//alert(segu);
						document.getElementById('cronos').innerHTML=segu;
					
					segu--;
					horvar=hora;
					minvar=minu;
					segvar=segu;
					//alert(segu);
				
					toVar = setTimeout('cdfunc(horvar,minvar,segvar)',1000);
				}
			}
		}
		
	</script>
  </head>
  
  <body>
    <br>
	<h1>CRONÓMETRO</h1><br><br><br>

	
	<form name="setime" method="get">
	
	
	<div id="datos">
		<select name="hor" onBlur="horvar=parseInt(this.value);">
			<option value="00">00</option>
			<option value="01">01</option>
			<option value="02">02</option>
			<option value="03">03</option>
			<option value="04">04</option>
			<option value="05">05</option>
			<option value="...">... Hasta 23</option>
			
		</select>
			
		<select name="min" onBlur="minvar=parseInt(this.value);">
			<option value="00">00</option>
			<option value="01">01</option>
			<option value="02">02</option>
			<option value="03">03</option>
			<option value="04">04</option>
			<option value="05">05</option>
			<option value="...">... Hasta 59</option>
			
		</select>
		
		<select name="seg" onBlur="segvar=parseInt(this.value);">
			<option value="00">00</option>
			<option value="01">01</option>
			<option value="02">02</option>
			<option value="03">03</option>
			<option value="04">04</option>
			<option value="05">05</option>
			<option value="...">... Hasta 59</option>
			
		</select>
		
		<button name="cdgo" onClick="document.setime.cdgo.disabled=true;
									 document.setime.hor.disabled=true;
									 document.setime.min.disabled=true;
									 document.setime.seg.disabled=true;
									 document.setime.resume.disabled=false;
									 document.setime.stopped.disabled=false;
									 document.getElementById('crono').style.display='';
									 document.getElementById('datos').style.display='none';
									 horsum=horvar;
									 minsum=minvar;
									 segsum=segvar;
									 cdfunc(horvar,minvar,segvar);
									 ">GO!</button>
	
	
	</div>
<br><br><br><br><br>
	<div id="crono">
	<p style="width:100%; text-align:center; font-size:48px;"><span id="cronoh">00</span> : <span id="cronom">00</span> : <span id="cronos">00</span></p>
	
<br><br>
	<button name="resume" onClick="runvar=1; cdfunc(horvar,minvar,segvar); document.setime.resume.disabled=true; document.setime.stopped.disabled=false;">REANUDAR</button><button name="stopped" onClick="runvar=0; document.setime.stopped.disabled=true; document.setime.resume.disabled=false;">PAUSAR</button>
	</div>
	</form>

	<script type='text/javascript'>
		document.setime.resume.disabled=true;
		document.setime.stopped.disabled=true;
		document.getElementById('crono').style.display='none';
	</script>
	
  </body> 
 </html>
Por si alguien lo comenta, sé que tengo un juego con los able/disable de los DIVs y los campos del formulario, que en algunos momentos es inncesario, pero está hecho a voluntad. Necesito que sea así.

La versión de FireFox es la 10.0.10.

Si supiérais darme una luz, por favor...

Muchas gracias!!
  #2 (permalink)  
Antiguo 22/11/2012, 03:44
Avatar de veruti85  
Fecha de Ingreso: octubre-2012
Ubicación: Entre Huelva y Madrid
Mensajes: 32
Antigüedad: 10 años, 10 meses
Puntos: 7
Respuesta: Problemas con setTimeout

Con el html que has puesto, se esta enviando el form y recarga la pantalla... no se si es tu problema, pero metiendole al form un onsubmit return false, ya no recarga y en firefox me funciona bien

<form name="setime" method="get" onsubmit="return false;">

Mi version de firefox es 15.0.1

Saludos
  #3 (permalink)  
Antiguo 22/11/2012, 03:59
Avatar de EriBCN  
Fecha de Ingreso: noviembre-2012
Ubicación: Barcelona
Mensajes: 2
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Problemas con setTimeout

Ostras!!!

Pues es verdad.
Pero no entiendo qué tiene que ver que no definas un tipo de submit, ya sea con el action o con el onsubmit, si no estoy usando el objeto de formulario submit.

Sólo utilizo botones del tipo button normal y corriente.

De todos modos, por lo visto, con firefox debe ser así para el correcto funcionamiento de estos componentes, así que tomo nota.

MIL GRACIAS!!!
  #4 (permalink)  
Antiguo 22/11/2012, 05:52
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 2 meses
Puntos: 1567
Respuesta: Problemas con setTimeout

Cita:
Iniciado por EriBCN Ver Mensaje
Ostras!!!

Pues es verdad.
Pero no entiendo qué tiene que ver que no definas un tipo de submit, ya sea con el action o con el onsubmit, si no estoy usando el objeto de formulario submit.

Sólo utilizo botones del tipo button normal y corriente.

De todos modos, por lo visto, con firefox debe ser así para el correcto funcionamiento de estos componentes, así que tomo nota.

MIL GRACIAS!!!
En FF, tanto un tag <button> como un input type="submit", realizan el envío (submit)
deberías utilizar un <input type="button"...>
Además acostumbrate siempre, aunque sea un ejemplo a declarar todas tus variables con var y definir un doctype
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <script type='text/javascript'>
  6. //<![CDATA[
  7.  var horsum=0;
  8.  var minsum=0;
  9.  var segsum=0;
  10.  
  11.  var horvar=0;
  12.  var minvar=30;
  13.  var segvar=0;
  14.  
  15.  var runvar=1;
  16.  var toVar;
  17.  
  18.      
  19.      
  20.  function cdfunc (hora, minu, segu){
  21.   //alert(segu + minu + hora);
  22.  
  23.   if (runvar==1){
  24.  
  25.    if (segu + minu + hora == 0){
  26.      document.getElementById('cronos').innerHTML=segu;
  27.      horvar=horsum;
  28.      minvar=minsum;
  29.      segvar=segsum;
  30.      alert("Has agotado el tiempo!!");
  31.      document.setime.cdgo.disabled=false;
  32.      document.setime.hor.disabled=false;
  33.      document.setime.min.disabled=false;
  34.      document.setime.seg.disabled=false;
  35.      document.setime.resume.disabled=true;
  36.      document.setime.stopped.disabled=true;
  37.      document.getElementById('crono').style.display='none';
  38.      document.getElementById('datos').style.display='';
  39.    }else{
  40.     //alert(hora + minu + segu);
  41.     if (segu<0){
  42.      minu--;
  43.      segu=59;
  44.      if (minu<0){
  45.       hora--;
  46.       minu=59;
  47.      }
  48.      //alert(hora + minu + segu);
  49.     }
  50.    
  51.     //alert(hora);
  52.    
  53.      document.getElementById('cronoh').innerHTML=hora;
  54.    
  55.     //alert(minu);
  56.      document.getElementById('cronom').innerHTML=minu;
  57.    
  58.     //alert(segu);
  59.      document.getElementById('cronos').innerHTML=segu;
  60.    
  61.     segu--;
  62.     horvar=hora;
  63.     minvar=minu;
  64.     segvar=segu;
  65.     //alert(segu);
  66.    
  67.     toVar = setTimeout('cdfunc(horvar,minvar,segvar)',1000);
  68.    }
  69.   }
  70.  }
  71.  
  72. //]]>
  73. <title>Cronómetro</title>
  74. </head>
  75. <br />
  76. <h1>Cronómetro</h1>
  77. <br />
  78. <br />
  79. <br />
  80. <form name="setime" method="get" action="#" id="setime">
  81. <div id="datos"><select name="hor" onblur="horvar=parseInt(this.value);">
  82. <option value="00">00</option>
  83. <option value="01">01</option>
  84. <option value="02">02</option>
  85. <option value="03">03</option>
  86. <option value="04">04</option>
  87. <option value="05">05</option>
  88. <option value="...">... Hasta 23</option>
  89. </select> <select name="min" onblur="minvar=parseInt(this.value);">
  90. <option value="00">00</option>
  91. <option value="01">01</option>
  92. <option value="02">02</option>
  93. <option value="03">03</option>
  94. <option value="04">04</option>
  95. <option value="05">05</option>
  96. <option value="...">... Hasta 59</option>
  97. </select> <select name="seg" onblur="segvar=parseInt(this.value);">
  98. <option value="00">00</option>
  99. <option value="01">01</option>
  100. <option value="02">02</option>
  101. <option value="03">03</option>
  102. <option value="04">04</option>
  103. <option value="05">05</option>
  104. <option value="...">... Hasta 59</option>
  105. </select> <input type="button" name="cdgo" onclick=
  106. "document.setime.cdgo.disabled=true; document.setime.hor.disabled=true; document.setime.min.disabled=true; document.setime.seg.disabled=true; document.setime.resume.disabled=false; document.setime.stopped.disabled=false; document.getElementById('crono').style.display=''; document.getElementById('datos').style.display='none'; horsum=horvar; minsum=minvar; segsum=segvar; cdfunc(horvar,minvar,segvar);"
  107. value="GO" /></div>
  108. <br />
  109. <br />
  110. <br />
  111. <br />
  112. <br />
  113. <div id="crono">
  114. <p style="width:100%; text-align:center; font-size:48px;"><span id="cronoh">00</span> : <span id="cronom">00</span> : <span id="cronos">00</span></p>
  115. <br />
  116. <br />
  117. <input type="button" name="resume" onclick="runvar=1; cdfunc(horvar,minvar,segvar); document.setime.resume.disabled=true; document.setime.stopped.disabled=false;" value="REANUDAR" /><input type=
  118. "button" name="stopped" onclick="runvar=0; document.setime.stopped.disabled=true; document.setime.resume.disabled=false;" value="PAUSAR" /></div>
  119. </form>
  120. <script type='text/javascript'>
  121. //<![CDATA[
  122.  document.setime.resume.disabled=true;
  123.  document.setime.stopped.disabled=true;
  124.  document.getElementById('crono').style.display='none';
  125. //]]>
  126. </body>
  127. </html>


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: countdown, cronometro, firefox, settimeout
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




La zona horaria es GMT -6. Ahora son las 18:59.