如何让React中setInterval切换屏幕后持续运行？

当前代码依赖setInterval直接累加计数，当页面切换到后台（标签页切换、窗口最小化）时，浏览器会限制定时器的执行频率甚至暂停，导致计数停止。除了localStorage/sessionStorage，还有以下几种可靠实现方式：

1. 基于时间戳差值计算实际计数 #

核心思路是不依赖定时器执行次数，而是记录计数开始的时间戳，每次更新时计算当前时间与开始时间的差值，再换算成实际计数。这种方式即使定时器暂停，恢复后也能算出准确数值，不受页面后台限制。

修改后的代码：

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [startCounting, setStartCounting] = useState(false);
  const [startTime, setStartTime] = useState(null);
  let interval;

  const handleCount = () => {
    setStartCounting(true);
    setStartTime(Date.now());
  };

  useEffect(() => {
    if (startCounting) {
      interval = setInterval(() => {
        // 计算从开始到当前的毫秒数，除以间隔时间得到计数
        const elapsed = Date.now() - startTime;
        setCount(Math.floor(elapsed / 10));
      }, 10);
    }

    return () => {
      clearInterval(interval);
    };
  }, [startCounting, startTime]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleCount} disabled={startCounting}>
        Start counting
      </button>
    </div>
  );
}

export default App;

2. 使用Web Worker运行计数器 #

Web Worker运行在独立的后台线程，不受页面可见性影响，即使页面处于后台，Worker内的定时器也能正常运行。通过Worker和主线程的消息通信更新计数。

步骤1：创建Worker文件（比如counter.worker.js） #

let count = 0;
let interval;

self.addEventListener('message', (e) => {
  if (e.data === 'start') {
    interval = setInterval(() => {
      count += 1;
      self.postMessage(count);
    }, 10);
  }
});

self.addEventListener('beforeunload', () => {
  clearInterval(interval);
});

步骤2：在React组件中使用Worker #

import React, { useState, useEffect, useRef } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [startCounting, setStartCounting] = useState(false);
  const workerRef = useRef(null);

  const handleCount = () => {
    setStartCounting(true);
    workerRef.current.postMessage('start');
  };

  useEffect(() => {
    // 初始化Worker
    workerRef.current = new Worker('./counter.worker.js');
    
    // 监听Worker发来的计数消息
    workerRef.current.addEventListener('message', (e) => {
      setCount(e.data);
    });

    return () => {
      workerRef.current.terminate();
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleCount} disabled={startCounting}>
        Start counting
      </button>
    </div>
  );
}

export default App;

3. 结合Page Visibility API修正计数 #

监听页面可见性变化，当页面从后台回到前台时，计算后台停留的时长，一次性补上这段时间的计数，避免遗漏。

代码示例：

import React, { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [startCounting, setStartCounting] = useState(false);
  const [lastUpdateTime, setLastUpdateTime] = useState(Date.now());
  let interval;

  const handleCount = () => {
    setStartCounting(true);
    setLastUpdateTime(Date.now());
  };

  useEffect(() => {
    if (startCounting) {
      interval = setInterval(() => {
        setCount(prev => prev + 1);
        setLastUpdateTime(Date.now());
      }, 10);
    }

    // 监听页面可见性变化
    const handleVisibilityChange = () => {
      if (!document.hidden && startCounting) {
        // 计算后台停留的毫秒数
        const elapsed = Date.now() - lastUpdateTime;
        // 补上这段时间的计数
        setCount(prev => prev + Math.floor(elapsed / 10));
        setLastUpdateTime(Date.now());
      }
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);

    return () => {
      clearInterval(interval);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    };
  }, [startCounting]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleCount} disabled={startCounting}>
        Start counting
      </button>
    </div>
  );
}

export default App;

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