无法停止setInterval？按钮控制定时器的全局变量问题求助

我来帮你搞定这个定时器停不下来的问题，核心问题出在定时器ID的作用域，另外你的代码里还有几个语法小错误，我一起帮你修正：

问题分析 #

1. 作用域错误：你在runButton函数内部用var intID声明了定时器ID，这会让它变成局部变量，stopButton函数根本访问不到这个变量。而且开头的var intID == 0是比较运算符，不是赋值，应该改成var intID = 0。
2. 语法错误：stopButton里的c.style.backgroundColor = red;中，red是字符串，需要加引号；runButton里的if (intID == 1)判断没有意义，因为setInterval返回的ID是系统分配的数字，不会固定是1。
3. 逻辑错误：你在定时器回调里尝试判断intID ==1来清除定时器，这完全没必要，停止操作应该交给stopButton来做。

修正后的完整代码 #

首先，把定时器ID声明在全局作用域，这样两个函数都能访问到它；然后修正所有语法和逻辑错误：

<!-- 补上HTML结构，方便直接测试 -->
<canvas id="can1" width="400" height="100" style="border:1px solid #ccc;"></canvas>
<button onclick="runButton()">开始动画</button>
<button onclick="stopButton()">停止动画</button>

<script>
// 把intID声明在全局作用域，让两个函数都能访问
var intID = 0;

function runButton() {
  // 先判断如果已有定时器在运行，就先清除，避免重复创建
  if (intID) {
    clearInterval(intID);
  }
  
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");
  var speed = 2;
  var posX = 20;
  var posY = 20;
  
  // 这里不再用var声明intID，直接赋值给全局变量
  intID = setInterval(function() {
    posX += speed;
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillStyle = "black";
    ctx.fillRect(posX, posY, 20, 20);
    
    // 可选：加个边界判断，让方块到边缘后重置位置
    if (posX > c.width - 20) {
      posX = 20;
    }
  }, 30);
}

function stopButton() {
  // 先判断定时器是否存在，避免报错
  if (intID) {
    clearInterval(intID);
    intID = 0; // 重置ID，方便下次判断
  }
  
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, c.width, c.height);
  c.style.backgroundColor = "red"; // 给red加引号
}
</script>

关键改动说明 #

• 全局作用域的intID：把intID放在函数外部声明，这样runButton和stopButton都能读写这个变量。
• 重复创建定时器的预防：在runButton开头加了判断，如果已有定时器在运行，先清除再创建，避免多个定时器同时运行导致动画加速。
• 语法修正：修复了==赋值错误、red未加引号的问题。
• 安全判断：在stopButton里先判断intID是否存在再清除，避免调用clearInterval(null)的潜在问题。

这样修改后，点击开始按钮会启动动画，点击停止按钮就能正常停止定时器并清空画布、改变背景色了。

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