0

Hola buen día estoy haciendo un cronometro, pero cuando lo ejecuto en mi navegador solo funciona cuando estoy dentro de la pagina cuando cambio de pestaña el cronometro se para en el tiempo en que haya quedado antes de cambiar de pestaña. Mi código JS es el siguiente:

var centesimas = 0;
var segundos = 0;
var minutos = 0;
var horas = 0;
var audio = document.getElementById("audio");

function inicio () {
	control = setInterval(cronometro,10);
	document.getElementById("inicio").disabled = true;
	document.getElementById("parar").disabled = false;
	document.getElementById("continuar").disabled = true;
	document.getElementById("reinicio").disabled = false;
}


function parar () {
	clearInterval(control);
	document.getElementById("parar").disabled = true;
    document.getElementById("continuar").disabled = false;
}


function reinicio () {
	clearInterval(control);
	centesimas = 0;
	segundos = 0;
	minutos = 0;
	horas = 0;
	Centesimas.innerHTML = ":00";
	Segundos.innerHTML = ":00";
	Minutos.innerHTML = ":00";
	Horas.innerHTML = "00";
	document.getElementById("inicio").disabled = false;
	document.getElementById("parar").disabled = true;
	document.getElementById("continuar").disabled = true;
	document.getElementById("reinicio").disabled = true;
}


function cronometro () {
	if (centesimas < 99) {
		centesimas++;
		if (centesimas < 10) { centesimas = "0"+centesimas }
		Centesimas.innerHTML = ":"+centesimas;
	}
	if (centesimas == 99) {
		centesimas = -1;
	}
	if (centesimas == 0) {
		segundos ++;
		if (segundos < 10) { segundos = "0"+segundos }
		Segundos.innerHTML = ":"+segundos;
	}
	if (segundos == 59) {
		segundos = -1;
	}
	if ( (centesimas == 0)&&(segundos == 0) ) {
		minutos++;
		if (minutos < 10) { minutos = "0"+minutos }
		Minutos.innerHTML = ":"+minutos;
	}
	if (minutos == 59) {
		minutos = -1;
	}
	if ( (centesimas == 0)&&(segundos == 0)&&(minutos == 0) ) {
		horas ++;
		if (horas < 10) { horas = "0"+horas }
		Horas.innerHTML = horas;
    }

    if(minutos == 1){
        clearInterval(control);
        document.getElementById("parar").disabled = true;
        document.getElementById("continuar").disabled = false;  
        enableAutoplay(); 
    }
    
}

function enableAutoplay() { 
    audio.autoplay = true;
    audio.load();
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="css/micss.css" rel="stylesheet">
    <title>Pomodoro</title>
</head>
<body> 

    <div id="contenedor">
		<div class="reloj" id="Horas">00</div>
		<div class="reloj" id="Minutos">:00</div>
		<div class="reloj" id="Segundos">:00</div>
		<div class="reloj" id="Centesimas">:00</div>
		<input type="button" class="boton" id="inicio" value="Inicio &#9658;" onclick="inicio();">
		<input type="button" class="boton" id="parar" value="Parar &#8718;" onclick="parar();" disabled>
		<input type="button" class="boton" id="continuar" value="Continuar &#8634;" onclick="inicio();" disabled>
        <input type="button" class="boton" id="reinicio" value="Reiniciar &#8635;" onclick="reinicio();" disabled>
        <audio id="audio" src="archivos/timbre.mp3">
        </audio>

    </div>
    
    <script src="js/mijs.js"></script>
</body>
</html>

6
  • Hola @juancamilovallejos0 , podrias poner el html para ver como se ejecuta?. Commented el 6 abr. 2018 a las 17:59
  • Listo amigo cuando lo ejecutas, y cambias de pestaña el se para. y cuando vuelves a la pestaña inicia nuevamente. Commented el 6 abr. 2018 a las 18:02
  • de pestaña o de pagina?, hay una diferencia ya que cuando cambias de pagina con html puro se actualiza la pagina por eso se detiene el contador , en tu caso. Commented el 6 abr. 2018 a las 18:05
  • Si de pagina. hay solución para esto ? Commented el 6 abr. 2018 a las 18:06
  • cambias de pagina en tu mismo dominio? si es así podes poner el código de una segunda pagina? y agregar cómo la llamarías desde la primera Commented el 6 abr. 2018 a las 18:40

1 respuesta 1

2

En tu caso se me ocurre usar Web Workers.

¿Parea que sirve?
Básicamente en web worker sirve para ejecutar proceso javascript en segundo plano de forma paralela en un hilo aparte, esto quiere decir que se ejecuta no en un solo hilo creado por el navegaro como es en tu caso.
¿Cómo puedo usarlo?
Mira esta pagina para que te quede mas claro Ejemplo

Disculpa lo vago de la respuesta pero no tuve tiempo para probar código.

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.