JavaScript翻牌游戏秒表clearInterval方法无法正常生效问题求助

问题排查&修复方案 #

• 核心问题1：定时器重复创建
  你给所有卡片都绑定了点击直接启动秒表的逻辑，每点击一次卡片就会生成一个新的定时器，全局变量time仅能保存最后一个定时器的ID，调用clearInterval时只能清理最后创建的定时器，之前生成的定时器会持续运行，看起来就是clearInterval失效。需要加判断，仅在第一次点击卡片、定时器未启动时才调用setInterval。
• 核心问题2：事件绑定错误
  你写的卡片点击事件绑定存在语法错误，且没有绑定卡片翻转的核心逻辑cardClick，导致卡片匹配逻辑根本不会执行，自然也不会走到全部匹配完成触发stopStopwatch的分支。
• 小问题：分钟归零逻辑语法错误
  ms, sec, min = 0; 是无效写法，仅会给min赋值为0，ms和sec不会被修改，需要改为ms = sec = min = 0。

修正后完整代码 #

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 = null; // 初始化为null，方便判断定时器是否在运行

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() {
    // 新增判断：只有定时器没运行的时候才启动
    if (!time) {
        time = setInterval(stopwatchTime, 10);
    }
}

function stopStopwatch() {
    clearInterval(time);
    time = null; // 清空定时器标记，方便下次启动判断
}

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', function() {
        startStopwatch();
        cardClick(this); // 传入当前点击的卡片元素执行翻转逻辑
    });
}

function cardClick(elCard) {
    // 新增判断：已经翻开的卡片点击不处理
    if (elCard.classList.contains('flipped') || elPrevCard === elCard) return;
    
    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() {
    // 新游戏先停掉当前正在跑的定时器
    stopStopwatch();
    for (let i = 0; i < elAllCards.length; i++) {
        elAllCards[i].classList.remove('flipped');
    }
    
    flippedCards = 0;
    elNewGameBtn.style.display = 'none';
    resetStopwatch();
});

内容的提问来源于stack exchange，提问作者troubledcoder