如何解决js定时器不准确问题

如何解决js定时器不准确问题

为什么会出现定时器不准确呢？

这个其实就得提到js执行机制了，叫做事件循环Eventloop 循环机制中，异步事件 setInterval 到时后会把回调函数放入消息队列中Event Queue，主线程的宏任务执行完毕后依次执行消息队列的微任务，等微任务执行完了在循环回来执行宏任务。并且由于消息队列中存在大量任务，其他任务执行时间就会造成定时器回调函数的延迟，如果不处理则会一直叠加延迟

解决方案

其实要解决这个也很简单
通过计算时差可以有效的解决

const _setInterval = (fn, delay, ...rest) => {
  let lastTime = Date.now();
  return setInterval(() => {
    let now = Date.now();
    if (now - lastTime >= delay) {
      lastTime = lastTime + delay;
      fn(...rest);
    }
  }, 1);
};

const timer = _setInterval(() => {
  console.log('执行了')
}, 500)

最后别忘了在不需要定时器的时候清楚定时器⏲️