JavaScript点击计数器+setInterval异常：重复显示后图片点击1次即消失

原问题核心 #

要实现「图片弹出后被点击3次消失，且该流程可重复执行」，但原代码第一次正常，后续弹出后点1次就消失——问题出在全局计数器未重置，再加上事件绑定和定时器的逻辑混乱。

原代码的坑点 #

1. clickMonster3是全局变量，第一次点击到3之后，这个值就一直保持3，后续图片弹出时，只要点击就直接触发display='none'
2. 每次调用monster003都重新绑定wolfmonster3.onclick=monster003，还重复创建setInterval，会导致定时器堆积、事件重复绑定，逻辑彻底混乱

修复后的优化代码 #

// 初始化计数器
let clickMonster3 = 0;
// 保存定时器实例，避免重复创建
let monsterTimer = null;

// 重置图片状态与计数器
function resetMonster() {
    wolfmonster3.style.display = 'block';
    clickMonster3 = 0;
}

// 处理图片点击逻辑
function handleMonsterClick() {
    clickMonster3++;
    if (clickMonster3 === 3) {
        wolfmonster3.style.display = 'none';
    }
}

// 只绑定一次点击事件，避免重复绑定
wolfmonster3.onclick = handleMonsterClick;

// 启动重复弹出逻辑，确保定时器只创建一次
if (!monsterTimer) {
    monsterTimer = setInterval(resetMonster, 6000);
}

关键修复点 #

• 抽离resetMonster函数，每次定时器触发弹出图片时，强制重置计数器为0，同时显示图片，从根源解决后续点击直接消失的问题
• 点击事件仅绑定一次，避免重复绑定导致单次点击触发多次计数
• 用变量存储定时器实例，防止多次创建定时器导致图片弹出频率失控
• 拆分「重置显示」和「处理点击」逻辑，代码更清晰，也避免原函数里的逻辑耦合

内容的提问来源于stack exchange，提问作者Script-issues