为何setInterval()调用无法停止？已尝试SO方案仍未解决

嘿，我一眼就揪出问题啦！你的代码里的变量作用域在搞小动作——每次调用repeat函数时，你都会创建一个局部的interval变量，这就导致：当你后续调用repeat(..., true)试图停止定时器时，你清除的只是刚创建的那个全新定时器的ID，而之前启动的旧定时器的ID早就丢失了，根本没被处理！

具体原因拆解 #

举个实际场景：

1. 你第一次调用repeat(2, false)，函数创建了一个定时器，把它的ID存在当前函数调用的局部interval里；
2. 过了一会儿你调用repeat(..., true)，这时候函数又会新建一个定时器（哪怕马上调用stopRepeat），但这个interval是本次函数调用的局部变量，和第一次的那个完全没关系；
3. 所以stopRepeat清除的是刚创建的这个新定时器，而第一次的定时器还在后台偷偷运行，自然看起来clearInterval没生效！

修复方案 #

我们需要让所有repeat调用共享同一个定时器ID，避免每次调用都丢失之前的ID。这里有两种常用的方式：

方案1：用闭包封装状态（推荐，不污染全局）

// 用闭包封装定时器状态，所有repeat调用共享同一个ID
const repeat = (function() {
  let interval = 0; // 闭包内的变量，不会污染全局作用域
  return function(time, bool) {
    // 先清除已存在的定时器，防止重复创建多个定时器
    if (interval) {
      clearInterval(interval);
    }
    interval = setInterval(choose, time * 1000);
    
    function stopRepeat() {
      console.log("im trying to stop");
      clearInterval(interval);
      interval = 0; // 清除后重置为0，避免后续误操作
    }
    
    if (bool) {
      stopRepeat();
    }
  }
})();

方案2：适配原始结构（使用全局变量，不推荐但快速兼容）

var interval = 0;
function repeat(time, bool) {
  // 先清除已有定时器，避免重复创建
  if (interval) {
    clearInterval(interval);
  }
  interval = setInterval(choose, time * 1000);
  function stopRepeat () {
    console.log("im trying to stop");
    clearInterval(interval);
    interval = 0;
  }
  if (bool) {
    stopRepeat();
  }
}

为什么这样有效？ #

改造后，所有repeat的调用都会共享同一个interval变量：

• 每次创建新定时器前，先清除旧的，避免多个定时器同时运行；
• 调用停止时，清除的是当前正在运行的那个定时器的ID，不会再出现“清错对象”的情况。

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