如何清除在函数内部调用的setInterval定时器？

问题核心 #

你的写法存在两个错误导致无法清除定时器：

1. clearInterval的入参要求是setInterval执行后返回的数字类型定时器ID，不是你定义的轮询执行函数polling本身
2. 定时器ID和polling函数都属于getAPI的局部作用域变量，外部init函数无权访问，自然无法获取到清除需要的ID

修复代码（原生JS场景） #

// 在外层公共作用域声明变量存储定时器ID
let pollingTimer = null;

function getAPI() {
    const polling = () => {
      if (convert !== undefined) {
        axios
          .post("/realtime", {
            GET_API_URL: convert.GET_API_URL,
            Headers1_key: convert.Headers1_key,
            Headers1_Value: convert.Headers1_Value,
            Headers2_key: convert.Headers2_key,
            Headers2_Value: convert.Headers2_Value,
            Headers3_key: convert.Headers3_key,
            Headers3_Value: convert.Headers3_Value,
          })
          .then(response => {
            setRandom(response.data);
          })
          .catch(error => {
            console.log(error);
          });
      } else {
        alert("try again.");
      }
    };
    // 每次创建新定时器前先清除旧定时器，避免重复生成多个轮询任务
    if (pollingTimer) clearInterval(pollingTimer);
    // 将setInterval返回的ID保存到外层变量
    pollingTimer = setInterval(polling, convert.API_Read_Speed);
}

const init = () => {
    // 传入保存的定时器ID完成清除
    clearInterval(pollingTimer);
    // 清除后重置变量状态
    pollingTimer = null;
};

框架场景适配 #

如果是在前端框架中使用，建议用框架提供的持久化存储方式存定时器ID，避免作用域、渲染更新导致变量丢失：

• React：使用useRef存储：

// 组件顶层声明
const pollingTimerRef = useRef(null);

// 存ID：pollingTimerRef.current = setInterval(...)
// 清除：clearInterval(pollingTimerRef.current)

• Vue：可挂载到组件实例this上，或者用ref变量存储均可。

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