Estoy tratando de crear un cronómetro para un juego en ejecución (comienza cuando se hace clic en la primera tarjeta, se detiene cuando todas las tarjetas están abiertas) y, a diferencia de setInterval, que funciona como debería, no puedo hacer que clearInterval funcione.
var elPrevCard = null; var flippedCards = 0; let elNewGameBtn = document.querySelector('.new-game'); let elAllCards = document.querySelectorAll('.card'); var TOTAL_COUPLES_COUNT = 3; let elStopwatch = document.querySelector('.stopwatch'); let ms = 0; let sec = 0; let min = 0; let time; function stopwatchTime() { ms++; if (ms >= 100) { sec++; ms = 0; } if (sec === 60) { min++; sec = 0; } if (min === 60) { ms, sec, min = 0; } let millis = ms < 10 ? `0` + ms : ms; let seconds = sec < 10 ? `0` + sec : sec; let minute = min < 10 ? `0` + min : min; let timer = `${minute}:${seconds}:${millis}`; elStopwatch.innerHTML = timer; }; function startStopwatch() { time = setInterval(stopwatchTime, 10); } function stopStopwatch() { clearInterval(time); } function resetStopwatch() { ms = 0; sec = 0; min = 0; elStopwatch.innerHTML = `00:00:00`; } for (let i = 0; i < elAllCards.length; i++) { elAllCards[i].addEventListener('click', startStopwatch(); }); } function cardClick(elCard) { elCard.classList.add('flipped'); if (elPrevCard === null) { elPrevCard = elCard; } else { var card1 = elPrevCard.getAttribute('data-card'); var card2 = elCard.getAttribute('data-card'); if (card1 !== card2) { setTimeout(function() { elCard.classList.remove('flipped'); elPrevCard.classList.remove('flipped'); elPrevCard = null; }, 1000); } else { flippedCards++; elPrevCard = null; if (TOTAL_COUPLES_COUNT === flippedCards) { stopStopwatch(); elNewGameBtn.style.display = 'inline'; } } } } elNewGameBtn.addEventListener('click', function newGame() { for (let i = 0; i < elAllCards.length; i++) { elAllCards[i].classList.remove('flipped'); } flippedCards = 0; elNewGameBtn.style.display = 'none'; resetStopwatch(); });Apreciaría mucho la ayuda con esto, no puedo decir lo que me estoy perdiendo aquí.
¡Gracias de antemano a todos los ayudantes!
Simplemente puede verificar si el time actualmente tiene un valor y establecerlo en null cuando borre el intervalo.
Nota: Además, al agregar los oyentes, asegúrese de pasar la función y no llamarla. entonces card.addEventListener('click', startStopwatch); no card.addEventListener('click', startStopwatch());
let time = null; // ... function startStopwatch() { if (time === null) { time = setInterval(stopwatchTime, 10); } } function stopStopwatch() { if (time !== null) { clearInterval(time); time = null; } } //... for (const card of elAllCards) { card.addEventListener('click', startStopwatch); }