Javascript之定时器精度问题

JavaScript中常用的定时器有setTimeout和setInterval两种。这两种定时器都是通过浏览器提供的API实现的，存在一些系统性的问题，因此不太靠谱。具体来说，以下是几个可能的原因：

1. 定时器精度问题

定时器的精度存在一定的误差，误差范围一般是几毫秒。例如，如果你使用setTimeout函数来设置一个延时1000毫秒的定时器，实际上可能是延时了1003毫秒或1005毫秒甚至更多。这使得定时器不能百分之百准确地按照预期的时间执行回调函数。

2. 事件循环问题

JavaScript的事件循环机制包括了宏任务和微任务两个队列，它们的执行优先级不同。例如，异步操作的回调函数会被放入微任务队列，而定时器的回调函数会被放入宏任务队列，它们的执行顺序可能会对业务逻辑造成影响。

3. 阻塞问题

当未完成的任务或I/O操作过多时，定时器可能会被阻塞，导致回调函数不能及时执行。例如，如果页面正在进行复杂的计算或大量的DOM操作，则可能会导致定时器不能准时执行回调函数。

综上，定时器虽然是常用的函数之一，但由于浏览器环境的问题，定时器的精度和可靠性都存在一定的局限性。为了避免这些问题，我们可以使用更专业的定时器库或者结合其他技术方案来达成更高效、更可靠的定时器效果。

---

解决方案：使用更可靠的API来自制定时器函数

// 用法同setInterval
function mySetInterval(callback, interval) {
  let start = Date.now();
  function loop() {
    let delta = Date.now() - start;
    if (delta >= interval) {
      callback();
      start = Date.now();
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
}

// 用法同setTimeout
function mySetTimeout(callback, delay) {
  let start = Date.now();
  function loop() {
    let delta = Date.now() - start;
    if (delta >= delay) {
      callback();
    } else {
      requestAnimationFrame(loop);
    }
  }
  requestAnimationFrame(loop);
}