Question

我正在尝试创建一个测验应用程序，我的问题是每当时间用完时，新计时器在重新渲染后从 0 开始并移动到 19 而不是 20。

我用最少的代码制作了一个 stackblitz 来展示我的问题。

如果我点击一个答案并且它从 20 秒开始，它在我的应用程序中正常工作。只有当我让计时器用完时才会发生。当有人在完整应用中点击答案时，两种方式重置计时器的方法相同，它只有一些额外的东西，例如获取新问题。

Answer 1

好的，我只是改变了第一个useEffect。我看到这里有两件事是错误的。 setInterval 的超时值为 19。它应该是 20，因为它正是运行该间隔所需的毫秒数。

第二件事是，您正在检查 timerWidth > 100 是否只有在值高于 100 时才会被勾选。但在您的情况下，您必须在 timerWidth 为 100 时重置计时器。因此更改 timerWidth >= 100 会起作用。

这里是有变化的 useEffect

useEffect(() => {
    if (answer === null && timerWidth < 100.1) {
      timerRef.current = setInterval(() => {
        setTimerWidth(timerWidth + 0.1);
        if (timerWidth >= 100) {
          setTimerWidth(0);
          setSecondsRemaining(20);
        }
      }, 20);
    }

如果解释不是那么好，请原谅。我不是母语为英语的人。如果有人能解释得更好，请继续。

为什么在我的应用程序中重置计时器会延迟？初始启动时间为 20 秒，但每次重置计时器都是从 0 开始，然后是 19

1 个答案: