hola, soy nuevo en código y javascript. Estoy creando un reloj con temporizador. la cuenta regresiva se hace bien con una alarma y una ventana emergente cuando el temporizador llega a cero. solo que no puedo apagar la alarma cuando cierro la ventana emergente que se abre en un bucle. necesito ayuda por favor
let departInput = document.querySelector('#times'); let subButton = document.querySelector('#sub') subButton.addEventListener('click', event => { let temps = (departInput.value)*60; var timerElement = document.getElementById("MyTimerDisplay") setInterval(() => { let minutes = parseInt(temps / 60, 10) let secondes = parseInt(temps % 60, 10) minutes = minutes < 10 ? "0" + minutes : minutes secondes = secondes < 10 ? "0" + secondes : secondes timerElement.innerText = `${minutes}:${secondes}` temps = temps <= 0 ? 0 : temps - 1 if(minutes == 0 && secondes == 0){ var snd = new Audio('clock.mp3'); snd.play(); alert("cest l'heure") } }, 1000) });Para abordar el problema que tiene, debe llamar a clearTimer() cuando suene la alarma para que su devolución de llamada no se ejecute una y otra vez cada segundo, incluso después de que se cumplió la condición de interrupción.
Aquí hay un ejemplo de trabajo para mostrar el punto:
let departInput = document.querySelector('#times'); let subButton = document.querySelector('#sub') subButton.addEventListener('click', event => { //decides how many minutes before the alarm rings let minutesToAlarm = parseInt(departInput.value); //initializes elapsedSeconds let elapsedSeconds = minutesToAlarm*60; var timerElement = document.getElementById("MyTimerDisplay"); var myTimer = setInterval(() => { //converts elapsedSeconds in mm:ss format and refresh the ui let minutes = Math.floor(elapsedSeconds/60); let secondes = elapsedSeconds % 60; timerElement.innerText = `${minutes}:${secondes}` //decrement elapsedSeconds by 1 elapsedSeconds--; if(elapsedSeconds === 0){ /* * Part muted because there's no reference to clock.mp3 * var snd = new Audio('clock.mp3'); snd.play(); */ alert("cest l'heure"); //here clears the timer so that the callback //won't be running again anymore clearTimeout(myTimer); } } , 1000); }); #sub{ border: solid 1px black; min-width: 5em; padding: 2px; cursor: pointer; } #MyTimerDisplay{ border: dashed 4px darkgray; margin-top: 5px; width: fit-content; padding: 5px 20px; } <input id="times" type="text" placeholder="departInput"/> <button id="sub">clickme</button> <div id="MyTimerDisplay">#times</div>