如何清除setInterval启动的函数定时器？worker值为0时停止loadFriendList

• 调用setInterval时会返回一个唯一的定时器ID，一定要把这个ID存起来
• 想要停止定时器时，直接调用clearInterval(定时器ID)就能终止定时执行

针对你给出的代码，需要调整几个地方来实现当worker变为"0"时停止loadFriendList的定时任务：

修改后的完整代码 #

import { useState, useEffect, useRef } from 'react';

const [worker, setWorker] = useState('1');
// 用useRef存定时器ID，组件重渲染时不会丢失这个值
const timerRef = useRef(null);

// 假设这是你的loadFriendList函数
function loadFriendList() {
  console.log('正在加载好友列表...');
}

function start() {
  // 启动定时器时把ID存到ref里
  timerRef.current = setInterval(loadFriendList, 5000);
}

// 初始化启动定时器，同时处理组件卸载时的清理
useEffect(() => {
  start();
  // 组件卸载前清除定时器，避免内存泄漏
  return () => {
    if (timerRef.current) {
      clearInterval(timerRef.current);
    }
  };
}, []);

// 监听worker状态变化，当值变为"0"时停止定时器
useEffect(() => {
  if (worker === '0' && timerRef.current) {
    clearInterval(timerRef.current);
    timerRef.current = null; // 清除后重置ID，防止重复操作
  }
}, [worker]);

function n() {
  setWorker("0");
  // 注意：setWorker是异步更新状态的，这里Alert弹出的worker还是旧值
  // 如果要显示更新后的worker，建议在监听worker的useEffect里处理
}

关键说明 #

• 用useRef保存定时器ID：普通变量在组件重渲染时会被重置，useRef的current属性可以跨渲染周期保存数据，刚好适合存定时器ID
• 双useEffect分工：一个负责初始化启动和卸载清理，另一个专门监听worker的状态变化，触发停止逻辑
• 关于setWorker的异步性：在n函数里调用setWorker("0")后，立刻打印worker会拿到旧值，因为React的状态更新是异步的，如果需要处理更新后的状态，要放在依赖worker的useEffect里

内容的提问来源于stack exchange，提问作者SL-BLACK-EAGLE