如何设置分钟级间隔的setInterval()实现定时API调用

setInterval 本身支持传入任意合法的毫秒数作为间隔参数，不存在只能设置秒级短间隔的限制，28分钟的间隔完全可以直接用，你只需要把时间换算成毫秒传入即可。

基于你现有代码的修正实现 #

直接修改你的useEffect逻辑即可，注意必须加定时器清理逻辑，避免组件卸载后定时器残留导致内存泄漏、重复请求：

useEffect(() => {
  // 如果需要组件挂载后立刻触发一次API，就取消下一行的注释
  // fetchYourApi()

  const intervalTimer = setInterval(() => {
    // 此处放置API调用逻辑
    // fetchYourApi()
  }, 28 * 60 * 1000); // 28分钟换算为毫秒：28*60秒*1000 = 1680000

  // 组件卸载时清理定时器
  return () => clearInterval(intervalTimer);
}, []); // 依赖数组留空，确保定时器仅在组件首次挂载时注册一次

注意事项 #

• 不要在useEffect的依赖数组中传入频繁变更的状态/属性，否则会导致定时器反复销毁、重建，最终执行间隔不符合预期
• 浏览器对后台标签页的定时器有强制节流策略，当页面切到后台、设备息屏时，setInterval 可能出现延迟触发、暂停触发的情况，如果你的业务对执行时机准确性要求高，不适合直接用原生固定间隔的setInterval。

其他可选实现方案 #

• 时间戳校验方案（兼容后台节流场景）
  不用固定长间隔定时器，改用短间隔轮询+时间差判断，同时监听页面从后台唤醒的事件，就算页面被挂起，切回时也能立刻判断是否需要触发API：

  useEffect(() => {
    const INTERVAL = 28 * 60 * 1000;
    let lastExecuteTime = Date.now();
  
    // 需要首次挂载就执行的话取消下一行注释
    // fetchYourApi()
  
    // 每分钟做一次时间检查，性能开销极低
    const checkTimer = setInterval(() => {
      const now = Date.now();
      if (now - lastExecuteTime >= INTERVAL) {
        fetchYourApi();
        lastExecuteTime = now;
      }
    }, 60 * 1000);
  
    // 页面从后台切回前台时立刻检查
    const handleVisible = () => {
      if (document.visibilityState === 'visible') {
        const now = Date.now();
        if (now - lastExecuteTime >= INTERVAL) {
          fetchYourApi();
          lastExecuteTime = now;
        }
      }
    };
    document.addEventListener('visibilitychange', handleVisible);
  
    return () => {
      clearInterval(checkTimer);
      document.removeEventListener('visibilitychange', handleVisible);
    };
  }, []);
  

• 后端定时任务方案（高可靠场景）
  如果这个定时任务要求无论用户是否打开页面都必须准时执行，不要把定时逻辑放在前端实现，直接在后端用Cron等定时任务工具触发API调用，前端只负责按需拉取执行结果即可——前端定时器永远受页面生命周期、浏览器权限策略限制，无法做到100%可靠。

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