!!AL FINAL DEL HILO HAY UN RESUMEN DEL PROBLEMA
Estoy realizando un cronómetro tipo ‘Pomodoro’ para uso propio de mis sesiones de estudio y a su vez aprender Javascript.
Cuando el contador del trabajo y el descanso termina de ejecutar, el contador de ciclos suma uno, hasta aquí todo bien. Conseguí que cuando el contador de ciclos sume uno, el temporizador de trabajo y descanso vuelva a su estado normal. ¿El problema? que en el fondo la función temporizador() se sigue ejecutando y me salta el alert() establecido en el eventListener comenzar como que el tiempo sigue corriendo.[
Para que esté todo claro empiezo describiendo mi código (si encuentras algún error, algo no debería de estar donde está o no debería realizar ciertas prácticas dímelo qué soy principiante). Me salto los botones y los llevó directamente a los manejadores de eventos. Como el error implica únicamente un manejador se los pongo:
comenzar.addEventListener('click', function () {
if (comenzarTiempo === undefined) {
comenzarTiempo = setInterval(temporizador, 1000);
} else {
alert('El tiempo ya esta corriendo!');
return;
}
})
Pues bien, este manejador cuando se le hace click al botón llama a la función temporizador [más abajo] cada segundo y guarda el valor del tiempo en la var comenzarTiempo. Esta es la función del temporizador();
//Cronometro
function temporizador() {
//Contador de los 25minutos de trabajo.
if (ts.innerText != 0) {
ts.innerText--;
} else if(tm.innerText != 0 && ts.innerText == 0) {
ts.innerText = 59;
tm.innerText--;
}
//Contador de los 5minutos de descanso.
if (tm.innerText == 0 && ts.innerText == 0) {
if (ds.innerText != 0) {
ds.innerText--;
} else if (ds.innerText == 0 && dm.innerText != 0) {
ds.innerText = 59;
dm.innerText--;
}
}
//Contador de ciclos de trabajo.
if (tm.innerText == 0 && ts.innerText == 0) {
if (dm.innerText == 0 && ds.innerText == 0) {
tm.innerText = 25;
ts.innerText = "00";
dm.innerText = "05";
ds.innerText = "00";
contador.innerText++;
}
}
return;
}
function ciclos() {
clearTimeout(comenzarTiempo)
detenerTiempo()
}
function detenerTiempo() {
clearInterval(comenzarTiempo);
}
Resumen: cuando presiono un botón que llama a una función esa función al acabar en el fondo sigue ejecutándose y si vuelvo a presionar el botón para volver a ejecutar la función no puedo ya que en el fondo sigue ejecutándose.
El motivo de mi pregunta es para que el usuario pueda volver a iniciar el temporizador cuando el quiera y no automaticamente cuando se haya cumplido un ciclo.
Gracias!