关闭站点时setTimeout不同步

Question

只要我保持打开窗口，setTimeout函数就可以与我的其他setTimeout函数保持一致。但是，如果我转到另一个选项卡/窗口，然后回到计时器，它将与其他倒计时不同步。

这是第一个定时器：

const [isDisabled, setIsDisabled] = useState(false);

    const handleOnClickUp = () => {
    setIsDisabled(true);
    setTimeout(() => setIsDisabled(false), 60000);}

第二定时器：

 const [counter, setCounter] = useState(60);

     if (isDisabled == true) {
    setTimeout(() => setCounter(counter - 1), 1000);
  }

  if (counter == 0) {
    setCounter(60);
  }

返回：

return (
    <>
      <div>{counter}</div>
      <button
        disabled={isDisabled}
        onClick={handleOnClickUp}
        className="bg-gray-500"
      >
        Up
      </button>
    
    </>
  );

TLDR:如何在没有问题的情况下同步两个定时器？

Answer 1

当选项卡处于非活动状态时，Chrome和大多数其他浏览器具有低优先级的执行，即setCounter没有经常被调用。不久前，我遇到了一个类似的问题，然后转向使用requestAnimationFrame。

下面是React的示例代码：

​

const countDown = 30 * 1000;
const defaultTargetDate = new Date().getTime();

const [targetDate, setTargetDate] = useState(new Date(defaultTargetDate));

const [remainingSeconds, setRemainingSeconds] = useState(countDown / 1000);

const countItDown = () =>
  requestAnimationFrame(() => {
    const diff = Math.floor((targetDate - new Date().getTime()) / 1000);
    setRemainingSeconds(diff);
    if (diff > 0) {
      countItDown();
    }
  });

useEffect(() => {
  countItDown();
}, [targetDate]);

​