React Native中计时器进度条不同步问题排查

场景与现有代码 #

我正在React Native中开发一个带进度条的计时器，计时器逻辑运行正常，但进度条和计时器始终不同步，计时器结束时进度条还没走完。

计时器逻辑代码 #

const [timerIsRunning, setTimerIsRunning] = React.useState(false);
const [seconds, setSeconds] = React.useState(startTimer); // startTimer为初始秒数，比如10

let intervalID: NodeJS.Timeout;
useEffect(() => {
  if (timerIsRunning) {
    intervalID = setInterval(() => {
      setSeconds((prevSeconds) => {
        if (prevSeconds === 0) {
          setTimerIsRunning(false);
          return prevSeconds;
        } else {
          console.log("SET NEW TIME: ", prevSeconds - 1);
          return prevSeconds - 1;
        }
      });
    }, 1000);
  }

  // 清理定时器
  return () => clearInterval(intervalID);
}, [timerIsRunning]);

进度条实现逻辑 #

为实现平滑进度效果，我原本让进度从100递减到0，每次步长1。比如10秒计时器，每秒进度减少10，因此计算了进度更新的间隔时间：

const [progress, setProgress] = React.useState(100);
const step = 100 / startTimer;
const intervalTime = 1000 / step;

let interval: NodeJS.Timeout;
useEffect(() => {
  if (timerIsRunning) {
    interval = setInterval(() => {
      setProgress((prevProgress) => {
        console.log("progress", prevProgress - 1);
        return prevProgress - 1;
      });
    }, intervalTime);
  }

  return () => clearInterval(interval);
}, [timerIsRunning]);

问题描述 #

当前计时器结束（seconds变为0）时，进度条并未走到0。从日志可以看到，最后进度停在2，而非预期的0：

progress 98
progress 97
progress 96
progress 95
progress 94
progress 93
progress 92
progress 91
seconds 9
progress 90
progress 89
progress 88
progress 87
progress 86
progress 85
progress 84
progress 83
seconds 8
progress 82
progress 81
progress 80
progress 79
progress 78
progress 77
progress 76
progress 75
progress 74
seconds 7
progress 73
progress 72
progress 71
progress 70
progress 69
progress 68
progress 67
progress 66
progress 65
seconds 6
progress 64
progress 63
progress 62
progress 61
progress 60
progress 59
progress 58
progress 57
progress 56
seconds 5
progress 55
progress 54
progress 53
progress 52
progress 51
progress 50
progress 49
progress 48
progress 47
seconds 4
progress 46
progress 45
progress 44
progress 43
progress 42
progress 41
progress 40
progress 39
progress 38
seconds 3
progress 37
progress 36
progress 35
progress 34
progress 33
progress 32
progress 31
progress 30
progress 29
seconds 2
progress 28
progress 27
progress 26
progress 25
progress 24
progress 23
progress 22
progress 21
progress 20
seconds 1
progress 19
progress 18
progress 17
progress 16
progress 15
progress 14
progress 13
progress 12
progress 11
seconds 0
progress 10
progress 9
progress 8
progress 7
progress 6
progress 5
progress 4
progress 3
progress 2

问题原因与解决办法 #

原因 #

1. 两个独立setInterval存在精度误差：定时器并非完全精确，触发时机逐渐偏移导致不同步。
2. 计时器停止时直接终止进度定时器：seconds变为0时，setTimerIsRunning(false)会清理进度定时器，但此时进度还未减到0。
3. 间隔时间取整误差：intervalTime可能是浮点数，setInterval自动取整后，累积误差导致进度更新次数不足。

解决办法 #

抛弃独立的进度定时器，直接基于seconds状态计算进度，确保两者完全同步：

const [timerIsRunning, setTimerIsRunning] = React.useState(false);
const [seconds, setSeconds] = React.useState(startTimer);
// 直接通过剩余秒数计算进度，无需单独维护progress状态
const progress = seconds > 0 ? (seconds / startTimer) * 100 : 0;

let intervalID: NodeJS.Timeout;
useEffect(() => {
  if (timerIsRunning) {
    intervalID = setInterval(() => {
      setSeconds((prevSeconds) => {
        if (prevSeconds === 0) {
          setTimerIsRunning(false);
          return prevSeconds;
        } else {
          return prevSeconds - 1;
        }
      });
    }, 1000);
  }

  return () => clearInterval(intervalID);
}, [timerIsRunning]);

每次seconds更新时，progress会自动同步计算，彻底解决不同步问题。如果需要更平滑的视觉效果，可以结合requestAnimationFrame优化，但核心逻辑始终基于剩余秒数推导进度。

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