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

Question

Edit:

In RN, setInterval isn't going to be exactly at the interval you want. Sometimes it will take longer

How can I implement a timer that ticks and display the time exactly at the interval you provide (eg 100 milliseconds)

The timer should count time the same way as the native timers that already comes with the mobile.

*Bellow this point is just what I tried to do, but it can be ignored or used to come with a solution

---

Background:

I'm making a timer. To display it on the screen I made an object like the following
eg

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

and I have a setInterval that subtracts x milliseconds from this object.

What I'm trying to do:

I need the fastest and optimal way to subtract milliseconds from this object. Following the normal time rule ( 1000 milliseconds is 1 seconds, 60 seconds is 1 minute ) and it also needs to stop at 0 if you get negative time.
It should feel like a native timer.

What I have tried:

This is the function that I use to subtract milliseconds from my timer object:

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

}

The logic is correct ( but also looks a little ugly, if there is a better way of doing this, I appreciate it ).

The way I use the interval is this useInterval hook

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])
}

And in my component I call it like

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

And I just display it like

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

The Problem:

When I run this, 1 seconds in my timer isn't 1 real life seconds.

How can I make it to be 1 real life second? Is my functions taking too long to run and that is why it's slow? Or I need something else?

How to execute my timer so it's match 1 second in real life?
Is there a better way to deal with my timer object?

Answer 1

I have found a way to work this out for timers.

I implemented Yossi idea and it works!

His idea (or what I understand of it) is to calculate the real time that the setInverval took to run and not the interval provided to the setInterval . You need to keep track of the time between intervals.

I also made an article about it how to do this in javascript.

Here is the implementation in ReactJs, which is the same for React Native, you only need to change what it renders.

I also test this in my React Native timer to check if this strategy works, and yes, it works.

Thank You Yossi!