How to continue setInterval after having stopped it

Question

How to continue setInterval after having stopped it

Navigation

#1 by (3 votes)
#2 by (1 votes)

0

With the first button I want to stop the interval and in the second part to continue the interval, I thought that from where I stayed the increase could continue later ... And now not even stop the first interval

<!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>

javascript setinterval

asked by francisco dwq 03.01.2018 в 12:02

source

2 answers

Help with Sql Server queries How can I save data in js without getting stuck when the page is reloaded? ANGULAR

score 3 · Answer 1

I try to explain to you the options you have:

OPTION 1 - Set Interval + variable that accumulates

With setInterval whenever you want to delete it, you will lose it.

Later, you have a code example where what is done is to call a function within the Interval that stores the value of accumulated seconds when we stop it, in the variable window.count .

If the interval is stopped, the window.count is reset so it starts again from scratch.

OPTION 2 - setTimeout instead of setInterval

What is usually done in these cases, is to take setTimeout (which is not repeated forever), and link one method with another in chain. You can see the solution they have given in this link .

setTimeout is a method that only runs once, so   wrapping it in a code structure that "repeats" it is also a   way to get what you want.

I'll post here the solution code 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>

I've also attached another link where they explain more options

score 1 · Answer 2

I modified your code and create a global variable that I will use as intevalo, and another one with the counter and then I start the interval or I make it clear ...

Try the following code:

<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>

Greetings and tell us how it went!