mouseleave事件中clearInterval失效？JS可视化计数器异常修复咨询

你的问题核心是变量遮蔽导致无法正确清除定时器：全局声明的timer被mouseenter事件内部重新声明的let timer覆盖，mouseleave里调用clearInterval(timer)时，操作的是全局的空值，真正的定时器实例根本没被停止。另外，重复触发mouseenter还会创建多个定时器，进一步加剧问题。

下面是优化后的代码：

let timer = null;
const targetBox = box[4];

if (targetBox) {
    targetBox.addEventListener('mouseenter', () => {
        // 若已有定时器在运行，先清除避免重复创建
        if (timer) {
            clearInterval(timer);
        }
        
        let sec = 0;
        // 直接赋值给全局timer，不再重新声明
        timer = setInterval(() => {
            sec++;
            targetBox.textContent = sec.toString();
            if (sec === 10) {
                clearInterval(timer);
                timer = null; // 计数完成后重置定时器变量
            }
        }, 1000);
        
        // 确保初始显示为0
        targetBox.textContent = '0';
    });

    targetBox.addEventListener('mouseleave', () => {
        // 清除并重置定时器
        if (timer) {
            clearInterval(timer);
            timer = null;
        }
        // 重置显示为0
        targetBox.textContent = '0';
    });
}

关键修改说明 #

• 消除变量遮蔽：移除mouseenter内部的let timer声明，直接使用全局的timer变量，确保mouseleave能获取到正确的定时器实例。
• 防重复创建定时器：mouseenter触发时先检查timer是否存在，若存在则先清除，避免快速多次鼠标进入导致多个定时器同时运行。
• 重置定时器状态：计数完成或鼠标离开后，将timer重置为null，避免后续判断出错。
• 优化DOM操作：使用textContent代替innerHTML（仅需更新文本时更安全高效），提前将box[4]赋值给变量，避免重复访问DOM集合。

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