浏览器非活跃标签页定时运行Javascript代码失效有何简单替代方案

以下方案实现成本均低于Web Worker，可根据你的业务场景选择：

• 方案1：递归setTimeout + 本地时间戳校验（全场景兼容，实现成本最低）
  放弃计时逻辑不可靠的setInterval，改用递归setTimeout搭配持久化存储的时间戳做校验，就算浏览器将非活跃标签页的定时器节流到最低1秒触发一次，也能保证间隔达标后执行任务：

  const ONE_DAY = 24 * 60 * 60 * 1000; // 24小时对应的毫秒数
  
  // 初始化首次执行的时间基准
  if (!localStorage.getItem('lastTaskRunTime')) {
    localStorage.setItem('lastTaskRunTime', Date.now().toString());
  }
  
  function executeDailyTask() {
    const lastRunTime = Number(localStorage.getItem('lastTaskRunTime'));
    const currentTime = Date.now();
  
    // 间隔达到24小时就执行业务逻辑
    if (currentTime - lastRunTime >= ONE_DAY) {
      // 这里替换为你需要执行的24小时任务代码
      console.log('24小时定时任务执行');
      // 更新上次执行时间
      localStorage.setItem('lastTaskRunTime', currentTime.toString());
    }
  
    // 计算下次触发的延迟时间，避免无意义的高频触发
    const delay = Math.max(0, ONE_DAY - (currentTime - lastRunTime));
    setTimeout(executeDailyTask, delay > 60000 ? delay : ONE_DAY);
  }
  
  // 启动任务
  setTimeout(executeDailyTask, 1000);
  

• 方案2：搭配visibilitychange事件补触发（适合仅用户活跃时需要执行结果的场景）
  如果你的任务不需要后台静默执行，只要用户切回标签页时能补执行到点的任务，只需要在方案1的基础上新增页面可见性监听即可，完全规避后台标签页节流问题：

  document.addEventListener('visibilitychange', () => {
    // 页面从隐藏切换为可见状态时，立刻校验是否需要执行任务
    if (!document.hidden) executeDailyTask();
  });
  

• 方案3：轻量服务端时间校准（适合对时间精度要求高的场景）
  如果担心用户修改本地时间导致计时偏差，可以每次执行校验前发送一个无返回的轻量HEAD请求，拿响应头的服务端时间做校准，实现复杂度也远低于Web Worker方案。

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