如何制作一个计时器，在 React Native 中以精确的时间间隔滴答和显示时间？

Question

编辑：

在 RN 中， setInterval不会正好是您想要的时间间隔。 有时需要更长的时间

我如何实现一个计时器，它可以准确地按照您提供的时间间隔（例如 100 毫秒）滴答和显示时间

计时器应该以与手机自带的本机计时器相同的方式计算时间。

*下面这一点正是我尝试做的，但可以忽略或用于解决方案

---

背景：

我在做一个计时器。 为了在屏幕上显示它，我制作了一个如下所示的对象
例如

let time = {
    milliseconds: 1,
    seconds: 2,
    minutes: 3
}

我有一个setInterval从这个对象中减去x毫秒。

我想做什么：

我需要最快和最佳的方法来从这个对象中减去毫秒数。 遵循正常的时间规则（1000 毫秒为 1 秒，60 秒为 1 分钟），如果您得到负时间，它也需要在0处停止。
它应该感觉像一个本地计时器。

我试过的：

这是我用来从计时器对象中减去毫秒的函数：

export function minusTime(time, millis) {

    let milliseconds = parseInt(millis % 1000)
    let seconds = Math.floor((millis / 1000) % 60)
    let minutes = Math.floor((millis / (1000 * 60)))

    if (time.minutes - minutes < 0) {
        return -1
    }
    time.minutes -= minutes
    if (time.seconds - seconds < 0) {
        if (time.minutes - 1 < 0) {
            return -1
        } else {
            time.minutes -= 1
            time.seconds += 60
        }
    }
    time.seconds -= seconds
    if (time.milliseconds - milliseconds < 0) {
        if (time.seconds - 1 < 0) {
            if (time.minutes - 1 < 0) {
                return -1
            } else {
                time.minutes -= 1
                time.seconds += 59
                time.milliseconds += 1000
            }
        } else {
            time.seconds -= 1
            time.milliseconds += 1000
        }
    }
    time.milliseconds -= milliseconds
    return time

}

逻辑是正确的（但也看起来有点丑，如果有更好的方法，我很感激）。

我使用间隔的方式是这个useInterval 钩子

function useInterval(callback, delay) {
    const savedCallback = useRef()

    // Remember the latest callback.
    useEffect(() => {
        savedCallback.current = callback
    }, [callback])

    // Set up the interval.
    useEffect(() => {
        function tick() {
            savedCallback.current()
        }
        if (delay !== null) {
            let id = setInterval(tick, delay)
            return () => clearInterval(id)
        }
    }, [delay])
}

在我的组件中，我称它为

useInterval(() => {
        ...
        let blockTime = minusTime(currentBlock.blockTime, interval)
        ...
}, isRunning ? interval : null)

我只是像这样展示它

<Text>                            
    {`${minutes}:${seconds},${milliseconds}`}
</Text>

问题：

当我运行它时，计时器中的 1 秒不是现实生活中的 1 秒。

我怎样才能让它成为现实生活中的一秒？ 我的函数运行时间是否太长，这就是它运行缓慢的原因？ 或者我需要别的东西？

如何执行我的计时器，使其在现实生活中匹配 1 秒？
有没有更好的方法来处理我的计时器对象？

Answer 1

我找到了一种为计时器解决这个问题的方法。

我实施了Yossi的想法并且它有效！

他的想法（或者我的理解）是计算setInverval运行的实际时间，而不是提供给setInterval的时间间隔。 您需要跟踪间隔之间的时间。

我还写了一篇关于如何在 javascript 中执行此操作的文章。

这里是ReactJs中的实现，React Native也是一样的，你只需要改变它渲染的内容即可。

我还在我的 React Native 计时器中对此进行了测试，以检查该策略是否有效，是的，它有效。

谢谢约西！