反应倒计时器无法正常工作

Question

因此，我正在为我的一个项目制作一个倒计时组件，以查看用户可以再次执行某操作之前剩余的时间。我有以秒为单位的时间差，并将秒数发送到我的倒计时组件。这就是我的倒计时组件的样子。

所以现在我什至没有使用时间差来进行测试，我只是做了 5000 秒。

    let [timerClock, setTimerClock] = useState(5000);                            
                                                                                 
    useEffect(() => {
    setInterval(function() {
        console.log("minus: ", timerClock)
        setTimerClock(timerClock - 1);
    }, 1000)
   }, [timerClock]);

因此，在最初的 10 秒内，一切正常，但在最初的几秒钟后，它开始出现故障，无法正常工作。它会在相同的数字内上下波动，并且在两者之间开始变得更快。所以说它从 5000 开始，一旦达到 4990 左右，它将开始在 4990、4991、4993 等之间反弹，然后由于某种原因而下降，并且完全出现故障。难道我做错了什么？在我看来，它应该起作用，只是不了解发生了什么。

这是我的辅导员的图像，你可以看到它没有正确倒计时，这次它搞砸了。

Answer 1

所以这里的一个大问题是当 useEffect 再次运行时你没有清理你的 Interval 。这实际上是创建了一堆 setIntervals（所有这些都会将 TimerClock 设置为效果运行时 timerClock 的值），并会导致内存的过度使用。实际上，每次更新timerClock 时，您都会创建另一个与前一个间隔独立运行的间隔。

useEffect(() => {
    const timer = setInterval(function() {
        console.log("minus: ", timerClock)
        setTimerClock(timerClock - 1);
    }, 1000)

    return () => { // this runs as the clean up function for the useEffect
       clearInterval(timer)
    }


   }, [timerClock]);

• 每次状态变量timerClock更改时，useEffect都会再次运行。
• 当timerClock从setTimerClock()更改时，返回函数将运行以清理间隔，然后使用新的timerClock值运行新的Effect，创建一个新的Interval。
• 实际上，您应该将 setTimeout 与clearTimeout 一起使用，如下代码所示。

useEffect(() => {
    const timer = setTimeout(function() {
        console.log("minus: ", timerClock)
        setTimerClock(timerClock - 1);
    }, 1000)

    return () => { // this should work flawlessly besides some milliseconds lost here and there 
       clearTimeout(timer)
    }


   }, [timerClock]);