setInterval slows down with tab/window inactive

[hy2850]

10 seconds have passed in real time, but only 5~6 seconds changed on the Timer.

Possible reasons behind the issue

• JS threading issue? (single thread)
• setInterval guarantees that the time gap between callback execution is at least 'delay' argument, not that callback executes exactly after the 'delay' Ref
  → other processes may meddle in before callback executes, making it longer than 'delay' for callback to run = our Timer doesn't tick per second
• Or maybe performance issue related with React useEffect hook Link

related question
https://stackoverflow.com/questions/23506103/setinterval-slows-down-with-tab-window-inactive

[hy2850]

Solving 3rd issue (frequent setInterval registration and clean-up) seems working

useInterval(() => {
    if(curTime === 0) {
    	...
    }
    setCurTime(curTime => curTime-1);   
}, didStart ? 1000 : null);

Ref
https://usehooks-typescript.com/react-hook/use-interval
https://github.com/streamich/react-use/blob/HEAD/docs/useInterval.md

[hy2850]

Cannot solve 1st/2nd issue, due to env limitation (single-threaded).
But may be able to mitigate big drift (slow down) using moment.js.

1. Whenever timer starts, set anchorDate on which the timer is supposed to end, based on time setting (curTime)
2. For every tick in useInterval, update curTime with different between now and the anchorDate

let anchorDate = useRef(null);

// countDown
useEffect(() => {
    if(didStart)
        anchorDate.current = moment().add(curTime, 's');
}, [didStart]);

useInterval(() => {
    if(curTime <= 0) {
       ....
    }
    // setCurTime(curTime => curTime-1); // previously

    let diff = anchorDate.current.diff(moment()); // returns milliseconds
    setCurTime(Math.round(diff/1000));
}, didStart ? 1000 : null);

[hy2850]

Possible works ahead : web worker for threading