clearInterval不工作在暂停功能的游戏结束

Question

我正在尝试为记忆游戏设置秒表。它必须在用户点击纸牌时开始运行，当所有纸牌都被翻转时暂停，当用户点击重置游戏按钮时重置。到目前为止，它启动正常，但没有停止或重置。我试图在start()之后立即执行pause()，秒表根本没有按预期运行，但我不确定pause()的原始定位是导致这个问题的原因。花了好几个小时调试，又在网上搜索答案，我还是不知道是怎么回事。

这是整个秒表功能

function timeToString(time) {
let diffInHrs = time / 3600000;
let hh = Math.floor(diffInHrs);

let diffInMin = (diffInHrs - hh) * 60;
let mm = Math.floor(diffInMin);

let diffInSec = (diffInMin - mm) * 60;
let ss = Math.floor(diffInSec);

let diffInMs = (diffInSec - ss) * 100;
let ms = Math.floor(diffInMs);

let formattedMM = mm.toString().padStart(2, "0");
let formattedSS = ss.toString().padStart(2, "0");
let formattedMS = ms.toString().padStart(2, "0");

return `${formattedMM}:${formattedSS}:${formattedMS}`;
}
let startTime;
let elapsedTime = 0;
let timerInterval;

function print(txt) {
document.querySelector(".play-time").innerHTML = txt;
}

function start() {
startTime = Date.now() - elapsedTime;
timerInterval = setInterval(function printTime() {
elapsedTime = Date.now() - startTime;
print(timeToString(elapsedTime));
});
}

function pause() {
clearInterval(timerInterval)
}

function reset() {
clearInterval(timerInterval);
print("00:00:00");
elapsedTime = 0;
}

游戏开始功能

function cardClicked(elCard) {
start()
if(isProcessing) return;
if (elCard.classList.contains('flipped')) return;


elCard.classList.add('flipped');


if (elPreviousCard === null) elPreviousCard = elCard;
else {

var card1 = elPreviousCard.getAttribute('data-card');
var card2 = elCard.getAttribute('data-card');

if (card1 !== card2){
isProcessing = true
audioWrong.play();
setTimeout(function () {
elCard.classList.remove('flipped');
elPreviousCard.classList.remove('flipped');
elPreviousCard = null;
isProcessing = false;
}, 1000)
} else {
audioRight.play();
flippedCouplesCount++;
elPreviousCard = null;
// All cards flipped, game over!
if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
audioWin.play();
restart.style.display = 'block';
pause()
}
}
}
}

点击重置

restart.addEventListener('click', () => {
flippedCouplesCount = 0;
for(card of cards) card.classList.remove('flipped');
restart.style.display = 'none';
shuffle();
reset()
})

Answer 1

开始函数在每次点击卡片时触发。正因为如此，setInterval每次都会运行，并且生成新的间隔，而无法进行操作。解决办法很简单，但也很烦人。

function cardClicked(elCard) {
// Just had to check if there was an existing interval 
if(!timerInterval) start()
if(isProcessing) return;
if (elCard.classList.contains('flipped')) return;
....