計時器的進度條不同步 - React native

Question

我目前正在嘗試創建一個帶有相應進度條的計時器。 看到這張圖片：（ https://i.stack.imgur.com/WSklt.png ）

我的計時器的邏輯工作正常：

 const [timerIsRunning, setTimerIsRunning] = React.useState(false);

 let intervalID: NodeJS.Timeout;
  useEffect(() => {
    if (timerIsRunning) {
      intervalID = setInterval(() => {
        setSeconds((seconds) => {
          // Return updated time to parent component
          if (seconds === 0) {
            setTimerIsRunning(false);
            return seconds;
          } else {
            console.log("SET NEW TIME: ");
            return seconds - 1;
          }
        });
      }, 1000);
    }

    // CleanUp
    return () => clearInterval(intervalID);
  }, [timerIsRunning]);

為了計算順利的進度，我嘗試以 1 的大小進行步數。我的進度應該是 go 從 100 到 0。

例如，使用 10 秒定時器。 每秒我的進步應該 go 下降 10 步。

為此，我計算了我進步的間隔時間：

  const step = 100 / startTimer;
  const intervalTime = 1000 / step;

  let interval: NodeJS.Timeout;
  useEffect(() => {
    if (timerIsRunning) {
      interval = setInterval(() => {
        setProgress((progress) => {
          console.log("SET NEW PROGRESS: ");
          return progress - 1;
        });
      }, intervalTime);
    }

    // }

    return () => clearInterval(interval);
  }, [timerIsRunning]);

我的問題：

我現在面臨的問題是我的計時器和進度不同步。 當計時器結束時，進度還沒有完成。 我的猜測是，進度只下降了 9 步而不是 10 步。但我真的不知道為什么。

正如您在以下日志中看到的那樣：

progress 98
TimerButton.tsx:69 progress 97
TimerButton.tsx:69 progress 96
TimerButton.tsx:69 progress 95
TimerButton.tsx:69 progress 94
TimerButton.tsx:69 progress 93
TimerButton.tsx:69 progress 92
TimerButton.tsx:69 progress 91
TimerButton.tsx:72 seconds 9
TimerButton.tsx:69 progress 90
TimerButton.tsx:69 progress 89
TimerButton.tsx:69 progress 88
TimerButton.tsx:69 progress 87
TimerButton.tsx:69 progress 86
TimerButton.tsx:69 progress 85
TimerButton.tsx:69 progress 84
TimerButton.tsx:69 progress 83
TimerButton.tsx:72 seconds 8
TimerButton.tsx:69 progress 82
TimerButton.tsx:69 progress 81
TimerButton.tsx:69 progress 80
TimerButton.tsx:69 progress 79
TimerButton.tsx:69 progress 78
TimerButton.tsx:69 progress 77
TimerButton.tsx:69 progress 76
TimerButton.tsx:69 progress 75
TimerButton.tsx:69 progress 74
TimerButton.tsx:72 seconds 7
TimerButton.tsx:69 progress 73
TimerButton.tsx:69 progress 72
TimerButton.tsx:69 progress 71
TimerButton.tsx:69 progress 70
TimerButton.tsx:69 progress 69
TimerButton.tsx:69 progress 68
TimerButton.tsx:69 progress 67
TimerButton.tsx:69 progress 66
TimerButton.tsx:69 progress 65
TimerButton.tsx:72 seconds 6
TimerButton.tsx:69 progress 64
TimerButton.tsx:69 progress 63
TimerButton.tsx:69 progress 62
TimerButton.tsx:69 progress 61
TimerButton.tsx:69 progress 60
TimerButton.tsx:69 progress 59
TimerButton.tsx:69 progress 58
TimerButton.tsx:69 progress 57
TimerButton.tsx:69 progress 56
TimerButton.tsx:72 seconds 5
TimerButton.tsx:69 progress 55
TimerButton.tsx:69 progress 54
TimerButton.tsx:69 progress 53
TimerButton.tsx:69 progress 52
TimerButton.tsx:69 progress 51
TimerButton.tsx:69 progress 50
TimerButton.tsx:69 progress 49
TimerButton.tsx:69 progress 48
TimerButton.tsx:69 progress 47
TimerButton.tsx:72 seconds 4
TimerButton.tsx:69 progress 46
TimerButton.tsx:69 progress 45
TimerButton.tsx:69 progress 44
TimerButton.tsx:69 progress 43
TimerButton.tsx:69 progress 42
TimerButton.tsx:69 progress 41
TimerButton.tsx:69 progress 40
TimerButton.tsx:69 progress 39
TimerButton.tsx:69 progress 38
TimerButton.tsx:72 seconds 3
TimerButton.tsx:69 progress 37
TimerButton.tsx:69 progress 36
TimerButton.tsx:69 progress 35
TimerButton.tsx:69 progress 34
TimerButton.tsx:69 progress 33
TimerButton.tsx:69 progress 32
TimerButton.tsx:69 progress 31
TimerButton.tsx:69 progress 30
TimerButton.tsx:69 progress 29
TimerButton.tsx:72 seconds 2
TimerButton.tsx:69 progress 28
TimerButton.tsx:69 progress 27
TimerButton.tsx:69 progress 26
TimerButton.tsx:69 progress 25
TimerButton.tsx:69 progress 24
TimerButton.tsx:69 progress 23
TimerButton.tsx:69 progress 22
TimerButton.tsx:69 progress 21
TimerButton.tsx:69 progress 20
TimerButton.tsx:72 seconds 1
TimerButton.tsx:69 progress 19
TimerButton.tsx:69 progress 18
TimerButton.tsx:69 progress 17
TimerButton.tsx:69 progress 16
TimerButton.tsx:69 progress 15
TimerButton.tsx:69 progress 14
TimerButton.tsx:69 progress 13
TimerButton.tsx:69 progress 12
TimerButton.tsx:69 progress 11
TimerButton.tsx:72 seconds 0
TimerButton.tsx:69 progress 10
TimerButton.tsx:69 progress 9
TimerButton.tsx:69 progress 8
TimerButton.tsx:69 progress 7
TimerButton.tsx:69 progress 6
TimerButton.tsx:69 progress 5
TimerButton.tsx:69 progress 4
TimerButton.tsx:69 progress 3
TimerButton.tsx:69 progress 2

Answer 1

我不確定你需要 2 個定時器。 如果您的進度取決於您設置秒數的計時器，您可以使用useMemo鈎子來計算您的進度。 就像是：

const [seconds, setSeconds] = useState(0)
const progress = useMemo(() => {
 // Place your logic of progress calculation and return new progress value
 return newProgressValue
}, [seconds])

useEffect(() => {
  setInterval(() => {
    // do you logic and set seconds
    setSeconds(newValue)
  }, 1000)
}, [])