Question

我正在用React构建一个计时器，多个人可以同时看到它。我注意到，一旦两个人在不同的选项卡上打开计时器，如果用户查看计时器的选项卡更改并返回，则该计时器将不同步（拖延几秒钟）。

我在计时器组件内部提供了一个duration属性，并且我拥有一个secondsToCountdown内部状态，该状态每秒钟在组件内部进行更新。间隔是这样的（使用钩子btw）：

const [secondsToCountdown, setSecondsToCountdown] = useState(duration * 60);

const tick = () => {
    setSecondsToCountdown(secondsToCountdown - 1);  
};

useInterval(
  () => {
    tick();
  },
  running ? 1000 : null
);

我猜测由于某种原因，当组件不在视野中时，间隔会停止或运行缓慢。有没有解决方法？我在这里做错什么了吗？唯一的解决方案就是仅使用visibilitychange事件中的某些东西吗？

Answer 1

我认为您可以使用requestAnimationFrame，而不是从数字开始倒数，您可以将当前日期时间与目标日期时间进行比较我在https://codesandbox.io/s/0v3xo8p4yp处制作了一个沙盒示例。

g.fillRect(x, y - h, 100, h);

当标签未聚焦时，React计数器不同步

1 个答案: