倒数计时器在 Chrome 中无法正常工作

Question

所以我有一个带有倒计时器的反应模式。计时器似乎不适用于 Chrome，但适用于 Firefox。在 Chrome 上，计时器开始倒计时，但在滴答大约 20 秒时会减少滴答声。

这是模态和计时器的当前实现。

import React, {useState, useEffect } from 'react';
import BaseModal from './Index';

export default function OtpModal(props: Props) {
  const [timeLeft, setTimeLeft] = useState<number>(120);

  useEffect(() => {
    const intervalId = setInterval(() => {
      console.log('tick', timeLeft);
      setTimeLeft(timeLeft - 1);
    }, 1000);

    return () => clearInterval(intervalId);
  }, [timeLeft]);

  return (
    <BaseModal>
      <div>
        OTP timeout in{' '}
        <span style={{fontWeight: '500'}}>
          {Math.floor(timeLeft / 60)}:
          {(timeLeft % 60).toString().padStart(2, '0')} 
        </span>
      </div>
    </BaseModal>
  )
}

Answer 1

您正在运行 useEffect 并每秒设置一个新计时器。

如果存在计时器限制，可能会导致问题。

您只能设置一个计时器并运行一次 useEffect，如下所示：

useEffect(() => {
    const intervalId = setInterval(() => {
      setTimeLeft((prev) => (prev > 0 ? prev - 1 : 0));
    }, 1000);

    return () => {
      clearInterval(intervalId);
    };
  }, []);