React Native项目中setInterval无法清除问题求助

问题根源 #

你的代码无法清除定时器主要有两个核心问题：

• setInterval的异步回调冲突：setInterval会严格按照设定间隔触发回调，不管上一次异步请求（axios调用）是否完成。如果请求耗时超过4秒，会同时存在多个pending的请求，即使其中一个请求成功调用clearInterval，已经进入执行队列的回调仍会继续运行，让你误以为定时器没被清除。
• 缺乏请求并发控制：没有限制同一时间只有一个请求在执行，导致定时器触发的回调可能重叠，clearInterval无法一次性终止所有正在运行的异步逻辑。

解决方案1：使用递归setTimeout（推荐） #

这种方式从根本上避免了setInterval的异步冲突，只有当前请求完成后才会安排下一次轮询，逻辑更可控：

const options = {
  method: 'get',
  url: 'http://demo.com/getInfo',
  headers: appHeaders,
};

let pollTimer;

const pollData = async () => {
  try {
    const results = await axios(options);
    if (Object.keys(results.data).length !== 0) {
      console.log('request successful');
      return; // 成功后终止递归，不再发起下一次请求
    }
    // 数据为空时继续轮询
    pollTimer = setTimeout(pollData, 4000);
  } catch (error) {
    console.log('there was an error sending remote control access request', error);
    // 出错后继续轮询（可根据需求调整是否停止）
    pollTimer = setTimeout(pollData, 4000);
  }
};

// 启动轮询
pollTimer = setTimeout(pollData, 4000);

// 如需手动停止，调用：clearTimeout(pollTimer);

解决方案2：给setInterval加并发锁 #

如果你坚持使用setInterval，可以通过添加请求锁避免回调重叠，确保clearInterval能有效终止后续触发：

const options = {
  method: 'get',
  url: 'http://demo.com/getInfo',
  headers: appHeaders,
};

let myInterval;
let isRequestPending = false; // 请求锁，避免并发

myInterval = setInterval(async function () {
  if (isRequestPending) return; // 上一次请求未完成，跳过本次触发
  isRequestPending = true;
  
  try {
    const results = await axios(options);
    if (Object.keys(results.data).length !== 0) {
      console.log('request successful');
      clearInterval(myInterval);
    }
  } catch (error) {
    console.log('there was an error sending remote control access request', error);
  } finally {
    isRequestPending = false; // 请求完成后释放锁
  }
}, 4000);

关键说明 #

• 递归setTimeout是异步轮询的最佳实践，能保证每次轮询都等待上一次请求完成，不会出现资源竞争或逻辑混乱。
• 若使用函数组件，需配合useEffect的清理函数在组件卸载时清除定时器，避免内存泄漏：

useEffect(() => {
  let pollTimer;
  // ... 上述pollData函数和启动逻辑
  return () => clearTimeout(pollTimer); // 组件卸载时清除定时器
}, []);

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