为什么 setInterval 不能正确工作？

Question

I am trying to make a stopwatch (00:00:00:00).But my one sec is slower than real one sec. I also changed the value of setInterval 10 to 1 but nothing changed. When I changed it as 100, it worked, time flowed slower. (00:00:00:00)=(hh:mm:ss:ms) Here is a part of my code:

const [time, setTime] = useState({
  ms: 0,
  ss: 0,
  mm: 0,
  hh: 0
})
let degisenMs = time.ms,
  degisenH = time.hh,
  degisenM = time.mm,
  degisenS = time.ss;
const run = () => {
  if (updatedMs === 100) {
    updatedS++;
    updatedMs = 0
  }
  if (updatedS === 60) {
    updatedM++;
    updatedS = 0;
  }
  if (M === 60) {
    updatedH++;
    updatedM = 0
  }
  updatedMs++;
  return (setTime({
    ms: updatedMs,
    ss: updatedS,
    mm: updatedM,
    hh: updatedH
  }))
}
const start = () => {
  setStatus(1)
  run()
  setInterv(setInterval(run, 10))
}

Answer 1

The problem is that setInterval is not exact, it is approximate . One option is to use web workers to increase accuracy as described in the link, but it is still not exact.

When it comes to measuring time, it is better to track the start timestamp and figure out how much time has passed at each tick/update. You can then update the UI or trigger an alarm etc. Here is some pseudocode.

const [ startTime, setStartTime ] = useState(null)
const [ intervalId, setIntervalId ] = useState(null)

function tick() {
  const now = new Date()
  const elapsedMs = now - startTime
  // Update UI etc using elapsedMs
}

function start() {
  setStartTime(new Date())
  // Run tick() every 100ms
  setIntervalId(setInterval(tick, 100))
}

function stop() {
  clearInterval(intervalId)
}