条件调用clearInterval无法识别对应setInterval问题如何解决

代码核心问题 #

• 定时器ID未持久化存储：你将setInterval返回的ID存在了loadQueueStatus函数的局部变量setListener中，函数执行完毕后该变量就会被销毁，下次触发函数时根本拿不到上一次创建的定时器ID，自然无法清除之前运行的定时器。
• 执行逻辑时序错误：当前代码每次触发都会先创建一个新的定时器，再判断要不要清除刚创建的这个新定时器，对上一次调用时创建的旧定时器完全没有处理，会导致旧定时器一直在后台运行，根本无法按照需求停止。
• 冗余操作无效：最后将setListener赋值为null没有任何意义，局部变量本身就不会被保留，也无法帮你清除定时器。

修复方案 #

把定时器ID存在组件实例属性上，每次调用函数时先清除上一次的定时器，再根据菜单开关状态决定是否要创建新的定时器，参考修复后代码：

// 点击菜单项时触发
const loadQueueStatus = async () => {
  // 先清除之前存在的定时器，避免重复创建
  if (this.intervalId) {
    clearInterval(this.intervalId)
    this.intervalId = null
  }

  // 拉取状态的函数，修正原代码内部变量重名问题
  const fetchQueueStatus = async () => {
    const data = await getQueueStatus()
    this.setState({queueStatus: data})
  }

  // 菜单从关闭变为打开的场景，先立即执行一次拉取，不需要等5秒
  if(!this.state.isVolunteerStatusOpen) {
    fetchQueueStatus()
    // 菜单打开的情况下，才创建轮询定时器，ID存在组件实例上持久存储
    this.intervalId = setInterval(fetchQueueStatus, 5000);
  }

  // 更新菜单开关状态
  this.setState({
    isVolunteerStatusOpen: !this.state.isVolunteerStatusOpen
  })
}

额外补充：为了避免内存泄漏，记得在组件卸载生命周期中也要清除残留的定时器：

componentWillUnmount() {
  if (this.intervalId) {
    clearInterval(this.intervalId)
  }
}

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