分数超过1000时如何停止定时器并实现完整重置功能？

核心问题 #

1. 清除定时器用错函数：你用clearTimeout清除setInterval创建的定时器，这完全无效——setInterval对应的清除函数是clearInterval，这是重置失效的核心原因。
2. 重复创建未清理：每次点击升级按钮都会新建定时器，旧定时器未被清除，导致多个定时器同时修改分数，重置时无法彻底终止所有计时逻辑。
3. 函数名错误：btn5的定时器绑定increment3，但实际定义的函数是increment2，导致该定时器无法正常执行，还会引发异常。

修正后的完整代码 #

JavaScript 部分

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const btnElement3 = document.getElementById("btn3");
const btnElement4 = document.getElementById("btn4");
const btnElement5 = document.getElementById("btn5");
const spnElement = document.getElementById("span");
let score = 1;

// 用数组统一管理所有定时器ID，简化批量清除逻辑
let intervalTimers = [];

// 封装清除所有定时器的复用函数
function clearAllIntervals() {
  intervalTimers.forEach(timerId => clearInterval(timerId));
  intervalTimers = []; // 清空数组，避免冗余ID残留
}

btnElement2.addEventListener("click", () => {
  if (score < 10) {
    console.log("poor");
  } else {
    score -= 10;
    spnElement.innerText = score;
    // 先清除已有定时器，再创建新的，避免多计时冲突
    clearAllIntervals();
    const timerId = setInterval(() => {
      score = score % 1000000 + 1;
      spnElement.innerText = score;
    }, 1000);
    intervalTimers.push(timerId);
  }
})

btnElement3.addEventListener("click", () => {
  if (score < 30) {
    console.log("poor");
  } else {
    score -= 30;
    spnElement.innerText = score;
    clearAllIntervals();
    const timerId = setInterval(() => {
      score = score % 1000000 + 5;
      spnElement.innerText = score;
    }, 1000);
    intervalTimers.push(timerId);
  }
})

btnElement4.addEventListener("click", () => {
  if (score < 80) {
    console.log("poor");
  } else {
    score -= 80;
    spnElement.innerText = score;
    clearAllIntervals();
    const timerId = setInterval(() => {
      score = score % 1000000 + 10;
      spnElement.innerText = score;
    }, 1000);
    intervalTimers.push(timerId);
  }
})

btnElement5.addEventListener("click", () => {
  if (score < 200) {
    console.log("poor");
  } else {
    score -= 200;
    spnElement.innerText = score;
    clearAllIntervals();
    // 修复函数名错误，改用箭头函数简化定义
    const timerId = setInterval(() => {
      score = score % 1000000 + 30;
      spnElement.innerText = score;
    }, 1000);
    intervalTimers.push(timerId);
  }
})

btnElement.addEventListener("click", () => {
  spnElement.innerText = score++;
})

btnElement1.addEventListener("click", () => {
  clearAllIntervals();
  spnElement.innerText = 0;
  score = 1;
})

document.body.addEventListener("keyup", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score++;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Enter") {
    clearAllIntervals();
    spnElement.innerText = 0;
    score = 1;
  }
})

CSS 部分（无改动）

body {
  background-color: moccasin;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: whitesmoke;
  position: absolute;
  right: 0;
  top: 0px;
  margin: 0px;
  border-width: 2px;
  border-bottom-width: 2px;
  border-bottom-color: #333;
  border-bottom-style: solid;
  width: 100.09%;
}

#btns {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin: 135px;
}

.btns {
  background-color: dimgray;
  color: whitesmoke;
  border: 0;
  border-radius: 5px;
}

.btns:hover {
  background-color: mediumpurple;
}

#upgradeButtons {
  margin: 20px;
}

#text {
  text-align: center;
}

HTML 部分（无改动）

<div id="header">
  <div id="text">
    <h1>Skibidi Clicker</h1>
    <h2><span id="span">0</span></h2>
  </div>
</div>

<div id="btns">
  <button id="btn" class="btns">+</button>
  <button id="btn1" class="btns">Reset</button><br>
  <div id="upgradeButtons">
    <button id="btn2" class="btns">Skibidi (10 clicks)</button><br>
    <button id="btn3" class="btns">Cameraman (30 clicks)</button><br>
    <button id="btn4" class="btns">Speakerman (80 clicks)</button><br>
    <button id="btn5" class="btns">Astro Toilet (200 clicks)</button>
  </div>
</div>

关键优化说明 #

• 统一定时器管理：用数组存储所有定时器ID，通过复用函数批量清除，避免多个变量维护的混乱。
• 修复清除函数错误：替换所有clearTimeout为clearInterval，确保定时器能被正确终止。
• 避免多计时冲突：每次点击升级按钮先清除已有定时器，防止多个逻辑同时修改分数。
• 修复函数名错误：修正btn5中的函数定义问题，保证定时器逻辑正常执行。

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