How to pause and resume a setInterval in this example?

Question

How to pause and resume a setInterval in this example?

Navigation

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

0

My question here is how to pause and resume at the interval with a single button. My pause function shows it but it does not work, I want to put false and then pass it to true and when it is true to re-activate the interval, I wanted to do something similar to what is commented below, but it does not fit. Thanks

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Objeto Window</title>
	<meta charset="UTF8"/>
	<link rel="stylesheet" href="clearInterval.css">
	<body>
		<div class="bigBox">
			<!-- <button onclick="start()" id="start"type="button" name="button">START</button> -->
			<button onclick="desactivar()" id="desactivar"type="button" name="button">DESACTIVAR</button>
			<button onclick="ReStartFunction()" id="restart"type="button" name="button">RESTART</button>
			<button onclick="pause()"id="pause"type="button" name="button">PAUSAR</button>
			<button onclick="stop()"id="stop"type="button" name="button">STOP</button>
		</div>
		
		<div id="result"></div></div>
		
		<script>
		
		let count = 0;
		let counter = setInterval(timer, 500)
		
		function timer(){
			count++;
			result.innerHTML = count;
		}
		
		function desactivar(){
			clearInterval(counter)
		}
		
		function ReStartFunction(){
			clearInterval(counter);
			count = 0;
			result.innerHTML = count;
			counter = setInterval(timer,500);
			restart.innerHTML = 'RESTARTED';
		}
		
		function pause(){
			let onOff = false;
			console.log(onOff);
			if (!onOff) {
				onOff = true;
				console.log(onOff);
				clearInterval(counter);
				document.getElementById('pause').innerHTML = 'REANUDAR';
			} else {
				onOff = false;
				counter = setInterval(timer, 500);
				document.getElementById('pause').innerHTML = 'PAUSAR';
			}
		}
		
		/*var space = false;
			body.onkeydown = function(e){
				e.preventDefault();
				if (e.keyCode == 32 && space == false) {
					space = true;
					video.pause();
				} else {
					space = false;
					video.play();
				}
			}*/
		</script>
	</body>
</head>

</html>

javascript setinterval

asked by francisco dwq 03.01.2018 в 16:38

source

2 answers

How to call a MYSQL stored procedure from PHP? Select a form created using a PHP array?

score 3 · Answer 1

You must declare the variable onOff outside the function pause() since when you declare it inside, regardless of whether it was changed to true in the first condition when you re-enter the function, it will be false and will never execute the else .

I hope it was clear if you have any questions, I'll gladly answer them.

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Objeto Window</title>
	<meta charset="UTF8"/>
	<link rel="stylesheet" href="clearInterval.css">
	<body>
		<div class="bigBox">
			<!-- <button onclick="start()" id="start"type="button" name="button">START</button> -->
			<button onclick="desactivar()" id="desactivar"type="button" name="button">DESACTIVAR</button>
			<button onclick="ReStartFunction()" id="restart"type="button" name="button">RESTART</button>
			<button onclick="pause()"id="pause"type="button" name="button">PAUSAR</button>
			<button onclick="stop()"id="stop"type="button" name="button">STOP</button>
		</div>
		
		<div id="result"></div></div>
		
		<script>
		
		let count = 0;
		let counter = setInterval(timer, 500)
		
		function timer(){
			count++;
			result.innerHTML = count;
		}
		
		function desactivar(){
			clearInterval(counter)
		}
		
		function ReStartFunction(){
			clearInterval(counter);
			count = 0;
			result.innerHTML = count;
			counter = setInterval(timer,500);
			restart.innerHTML = 'RESTARTED';
		}
		
    let onOff = false;
    
		function pause(){
			if (!onOff) {
				onOff = true;
				clearInterval(counter);
				document.getElementById('pause').innerHTML = 'REANUDAR';
			} else {
				onOff = false;
				counter = setInterval(timer, 500);
				document.getElementById('pause').innerHTML = 'PAUSAR';
			}
		}
		
		/*var space = false;
			body.onkeydown = function(e){
				e.preventDefault();
				if (e.keyCode == 32 && space == false) {
					space = true;
					video.pause();
				} else {
					space = false;
					video.play();
				}
			}*/
		</script>
	</body>
</head>

</html>

score 0 · Answer 2

Here you have an alternative in which I activate or deactivate buttons depending on the status of the counter.

The control of whether it is paused or not by adding a class paused to div container, but perfectly you could do it with a variable as a flag.

In this case I modified the function of the "OFF" button so that it simply disables the rest of the buttons, with no effect on the counter.

I hope it serves you.

let count = 0;
let bigBox = document.getElementsByClassName('bigBox')[0];
let counter;

// Add events handlers
document.getElementById('start').addEventListener('click', start);
document.getElementById('desactivar').addEventListener('click', desactivar);
document.getElementById('restart').addEventListener('click', restart);
document.getElementById('pause').addEventListener('click', pause);
document.getElementById('stop').addEventListener('click', stop);

function timer(){
  count++;
  result.innerText = count;
}

function start(){
  if (counter) clearInterval(counter);
  counter = setInterval(timer, 500);
  this.classList.add('disabled');
  document.getElementById('pause').classList.remove('disabled');
  document.getElementById('stop').classList.remove('disabled');
}

function desactivar(){
  bigBox.classList.toggle('disabled');
  this.innerText = bigBox.classList.contains('disabled')
    ? 'ACTIVAR' : 'DESACTIVAR';
}

function pause(){
  bigBox.classList.toggle('paused');
  if (bigBox.classList.contains('paused')){
    clearInterval(counter);
    this.innerText = 'REANUDAR';
  }
  else{
    if (counter) clearInterval(counter);
    counter = setInterval(timer, 500);
    this.innerText = 'PAUSAR';
  }
}

function stop(){
  if (counter) clearInterval(counter);
  count = 0;
  document.getElementById('pause').classList.add('disabled');
  bigBox.classList.remove('paused');
  document.getElementById('pause').innerText = 'PAUSAR';
  document.getElementById('restart').classList.remove('disabled');
  this.classList.add('disabled');
}

function restart(){
  if (counter) clearInterval(counter);
  counter = setInterval(timer,500);
  document.getElementById('pause').classList.remove('disabled');
  document.getElementById('stop').classList.remove('disabled');
  this.classList.add('disabled');
}

.bigBox button{
  width: 120px;
}

.bigBox.disabled button#start,
.bigBox.disabled button#restart,
.bigBox.disabled button#pause,
.bigBox.disabled button#stop,
button.disabled
{
    cursor: not-allowed;
    pointer-events: none;
    color: #666666;
    background-color: #eeeeee;
}

<div class="bigBox">
  <button id="start"type="button" name="button">START</button>
  <button id="desactivar"type="button" name="button">DESACTIVAR</button>
  <button id="restart"type="button" name="button" class="disabled">RESTART</button>
  <button id="pause"type="button" name="button" class="disabled">PAUSAR</button>
  <button id="stop"type="button" name="button" class="disabled">STOP</button>
</div>

<div id="result"></div>