0

mi pregunta aqui es como pausar y reanudar en intervalo con un solo boton. Mi pause function lo muestra pero no funciona, quiero poner false para luego pasarlo a true y cuando ya es true volver a activar el intervalo, queria hacer algo parecido a lo que esta comentado mas abajo, pero no me va. Gracias

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

2 respuestas 2

3

Debes declarar la variable onOff fuera de la función pause() ya que al declararla adentro, sin importar que se haya cambiado a true en la primer condición al volver a entrar a la función volverá a ser false y nunca ejecutará el else.

Espero haber sido claro si tienes preguntas con gusto las respondo.

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

2
  • no funciona STOP
    – userStack
    el 3 ene. 2018 a las 16:37
  • @x-rw la pregunta es para pausar/reanudar, en ningún momento menciona el STOP de hecho el OP ni siquiera tiene código creado para esa función, saludos. el 3 ene. 2018 a las 16:39
0

Aquí tienes una alternativa en la que voy activando o desactivando botones en función del estado del contador.

El control de si está pausado o no lo hago añadiendo una clase paused al div contenedor, pero perfectamente podrías hacerlo con una variable a modo de flag.

En este caso he modificado la función del botón "DESACTIVAR" para que simplemente inhabilite el resto de botones, sin efecto sobre el contador.

Espero que te sirva.

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>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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