如何在JavaScript中避免事件重复点击？解决计时器因重复点击加速问题

你的问题核心是每次点击按钮都会创建新的定时器实例，而且代码里错误地在启动后把timerStatus又设回了"Stopped"，导致每次点击都能触发新的setInterval，多个定时器同时执行stopWatch函数，看起来就是计时器越来越快。

要让点击操作仅生效一次（直到计时器被停止），只需要修改两处：

• 启动定时器后，将timerStatus改为非"Stopped"的状态（比如"Running"），阻止后续点击重复创建定时器
• 若需要停止功能，要确保停止时清除现有定时器并将状态改回"Stopped"

修改后的基础启动逻辑代码 #

playBtn.addEventListener('click', () => {
  if (timerStatus == "Stopped") {
    // 创建唯一的定时器实例
    timerInterval = window.setInterval(stopWatch, 1000);
    // 按钮图标建议切换为暂停（根据你的需求调整）
    document.getElementById('startstopBtn').innerHTML = ` <i class="fa-solid fa-pause" id="pause"></i>`;
    // 更新状态为运行中，阻止重复点击触发
    timerStatus = "Running";
  }
});

补充完整的启停切换逻辑（如果需要） #

如果你的按钮是用来切换启动/停止状态的，可以把逻辑整合到同一个点击事件里，避免重复绑定：

playBtn.addEventListener('click', () => {
  if (timerStatus == "Stopped") {
    timerInterval = window.setInterval(stopWatch, 1000);
    document.getElementById('startstopBtn').innerHTML = ` <i class="fa-solid fa-pause" id="pause"></i>`;
    timerStatus = "Running";
  } else if (timerStatus == "Running") {
    // 清除当前运行的定时器
    clearInterval(timerInterval);
    document.getElementById('startstopBtn').innerHTML = ` <i class="fa-solid fa-play" id="play"></i>`;
    timerStatus = "Stopped";
  }
});

这样同一时间只会有一个定时器在运行，无论点击多少次都不会出现计时器加速的情况。

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