0

Con el primer boton quiero parar el intervalo y en la segunda parte continuar el intervalo, pense que desde donde se quedo el incremento podria continuar luego... Y ahora ni siquiera se para el primer intervalo

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Objeto Window</title>
	<meta charset="UTF8"/>
	<body>
		<p>El intervalo que sucede cada 1.000 milisegundos se ha repetido <span id="tiempo">0</span> veces.</p>
		<button onclick="pararIntervalo()">Parar el intervalo</button>
		<button onclick="continuarIntervalo()">continuar el intervalo</button>

	</body>

	<script>

	let miIntervalo = setInterval(

		function(){
			miTemporizador()
		},1000);

		let incremento = 0;

		function miTemporizador() {
			incremento++;
			document.getElementById("tiempo").innerHTML = incremento;
		}

		function pararIntervalo() {
			clearInterval(miIntervalo);
		}



		let miIntervalo2 = setInterval(

			function(){
				continuarIntervalo()
			},1000);

			function continuarIntervalo() {
				incremento++;
				document.getElementById("tiempo").innerHTML = incremento;
			}


</script>

</head>

</html>

1
  • 3
    Esa funcionalidad deberías implementarla tú. Un clearInterval elimina el timer creado por setInterval, no existe la posibilidad de parar y continuar. Commented el 3 ene. 2018 a las 11:11

2 respuestas 2

3

Trato de explicarte las opciones que tienes:

OPCION 1 - Set Interval + variable que acumula

Con setInterval siempre que quieras borrarlo, lo perderás.

Más adelante, tienes un ejemplo de código donde lo que se hace, es llamar a una función dentro del Interval que guarda el valor de segundos acumulados cuando lo paramos, en la variable window.count.

Si se para el intervalo, se resetea el window.count por lo que se vuelve a comenzar desde cero.

OPCION 2 - setTimeout en vez de setInterval

Lo que se suele hacer en estos casos, es aprovechar setTimeout (que no se repite eternamente), y enlazar un método con otro en cadena. Puedes ver la solución que han dado en este link.

setTimeout es un método que sólo se ejecuta una vez, por lo que envolverlo en una estructura de código que "lo repite" es también una forma de conseguir lo que quieres.

Te pego aquí el código de la solución 1:

var pause=0;
var count=0;
var counter=setInterval(timer, 1000); 
var stoped=0
function timer()
{
  count=count+1;
  document.getElementById("timer").innerHTML=count + " secs"; 
}

function StopFunction()
{
  clearInterval(counter);
  window.count=0;
  window.pause=0;
  document.getElementById("pause").innerHTML="Pause"
  window.stoped=1
  document.getElementById("timer").innerHTML=count + " secs";
}

function ReStartFunction()
{
  if (counter)
  {
    clearInterval(counter);
    window.pause=0;
    window.count=0;
    window.stoped=0
    window.counter=setInterval(timer, 1000); 
    count=count+1;
    document.getElementById("pause").innerHTML="Pause"
    document.getElementById("timer").innerHTML=count + " secs"; 
  }
}

function PauseFunction()
{
  if (stoped==0)
  { 
    if (pause==0) 
    {
      clearInterval(counter);
      document.getElementById("pause").innerHTML="Resume"
      pause=1;
      return;
    }

  if (pause==1) 
    {
      window.counter=setInterval(timer, 1000); 
      document.getElementById("timer").innerHTML=count + " secs"; 
      document.getElementById("pause").innerHTML="Pause"
      pause=0;
      return;
    }
  }
  return;
}
<!DOCTYPE html>
<html>
<body>

<p>Con startTimeout puedes pararlo y arrancarlo </p>
<p id="timer"></p>

<button onclick="ReStartFunction()">ReStart</button>
<button onclick="StopFunction()">Parar</button>
<button id="pause" onclick="PauseFunction()">Pausa</button>


</body>
</html>

Te adjunto también otro link donde explican más opciones

5
  • 1
    Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – lois6b
    Commented el 3 ene. 2018 a las 11:55
  • 1
    En que tenga un momento, la mejoro y añado el otro modo. El link original lo estoy buscando. Y el chat no me deja responder, no se por que ... Commented el 3 ene. 2018 a las 12:34
  • corregido. PD: El link, en efecto era de donde @Pablo dijo. Confundí uno con otro de los que estuve mirando. Perdón N veces por el error. Commented el 3 ene. 2018 a las 13:02
  • Perfecta edición. Commented el 3 ene. 2018 a las 13:05
  • Pablo, disculpa decirte que el código no era de ahí. Trasteando me lié de pestaña y estaba totamente convencido. Mea culpa Commented el 3 ene. 2018 a las 13:21
1

modifiqué tu código y cree una variable global que la usaré como intevalo, y otra con el contador y luego inicio el intervalo o le hago clear...

Prueba el siguiente código:

<script>

// init de intervalo
var incremento = 0;
var intervalo;
var myIntervalo;

// comienza conteo
 myIntervalo = setInterval(function(){

    incremento++;
    document.getElementById("tiempo").innerHTML = incremento;

}, 1000);



// detengo intervalo
function pararIntervalo() {

    clearInterval(myIntervalo);

}

// retomo intervalo
function continuarIntervalo(){

    myIntervalo = setInterval(function(){

       incremento++;
       document.getElementById("tiempo").innerHTML = incremento;

   }, 1000);

}


</script>

Saludos y nos cuentas como te fue!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.