函数内部使用setInterval失效：用var存储interval供其他函数调用异常

嘿，别担心，新手遇到这种变量作用域的坑太正常啦！我帮你分析下问题所在，再给你几个可行的解决办法~

问题根源：var的函数作用域特性 #

你遇到的情况大概率是var的函数作用域导致的。举个例子，如果你写了类似下面的代码：

function startTimer() {
  var intervalId = setInterval(() => {
    console.log('定时器运行中...');
  }, 1000);
}

function stopTimer() {
  clearInterval(intervalId); // 这里会报错：intervalId未定义！
}

因为var声明的变量是函数作用域的，intervalId只在startTimer函数内部有效，stopTimer根本访问不到这个变量，自然没法控制定时器；甚至如果多次调用startTimer，还会创建多个独立的定时器，之前的定时器会因为变量被覆盖而彻底失控。

可行的解决方案 #

1. 将变量提升到共享作用域（入门级）

把intervalId声明在两个函数都能访问到的作用域里，比如全局作用域（注意：全局变量尽量少用，但新手可以先用来验证逻辑）：

var intervalId; // 声明在全局，两个函数都能访问

function startTimer() {
  // 先清空之前的定时器，避免重复创建
  if (intervalId) clearInterval(intervalId);
  intervalId = setInterval(() => {
    console.log('定时器运行中...');
  }, 1000);
}

function stopTimer() {
  clearInterval(intervalId);
  intervalId = null; // 清空变量，避免残留引用
}

2. 用let/const替代var（推荐）

ES6+的let/const是块级作用域，比var更安全，能避免很多作用域混乱的问题：

let intervalId; // let的作用域更清晰，不会被意外提升

function startTimer() {
  if (intervalId) clearInterval(intervalId);
  intervalId = setInterval(() => {
    console.log('定时器运行中...');
  }, 1000);
}

function stopTimer() {
  clearInterval(intervalId);
  intervalId = null;
}

3. 封装成对象（进阶，避免全局污染）

如果不想污染全局作用域，可以把定时器逻辑封装成一个对象，这样变量只在对象内部可见：

const timerManager = {
  _intervalId: null,
  start() {
    if (this._intervalId) clearInterval(this._intervalId);
    this._intervalId = setInterval(() => {
      console.log('定时器运行中...');
    }, 1000);
  },
  stop() {
    clearInterval(this._intervalId);
    this._intervalId = null;
  }
};

// 使用方式
timerManager.start();
timerManager.stop();

额外注意点 #

• 每次启动定时器前，记得先清空之前的定时器，避免多个定时器同时运行；
• 停止定时器后，最好把变量设为null，避免残留无效的定时器ID；
• 尽量避免使用var，它的作用域规则很容易引发bug，优先用let/const。

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