JS定时器不可靠的原因及解决方案

JS定时器不可靠的原因及解决方案

什么是JS定时器？

JS中有两种类型的定时器：

• setTimeout
• setInterval

这两个函数都是用来定时执行某些代码的。setTimeout函数会在指定的时间后执行一次性的操作，而setInterval会每隔指定时间执行一次操作。

JS定时器的不可靠性

JS定时器不可靠的原因是因为定时器的执行是基于事件循环机制的。事件循环机制是一种事件处理模型，它会不断地重复执行以下步骤：

1. 从事件队列中取出一个事件；
2. 如果事件存在，执行事件相应的处理函数；
3. 如果事件不存在，等待新的事件加入事件队列。

如果在事件处理过程中出现了阻塞操作，比如说长时间的循环操作或者网络请求，那么事件循环机制就会出现延迟。这种延迟会影响setTimeout和setInterval的执行时机，使得定时器不可靠。

解决方案

为了解决JS定时器的不可靠性问题，我们可以使用以下两种方法。

1. 使用requestAnimationFrame

requestAnimationFrame是window对象的一个方法，它的作用是在下一帧动画渲染之前执行特定的代码。由于requestAnimationFrame的执行时机是由浏览器掌控的，因此可以有效地避免定时器因为事件循环机制而出现的延迟问题。例如，下面的代码演示了如何使用requestAnimationFrame代替setInterval。

function animate() {
  // do something
  requestAnimationFrame(animate);
}

animate();

2. 使用setTimeout代替setInterval

另一种解决方法是使用setTimeout代替setInterval。由于setInterval每隔一段时间就会执行一次，因此如果出现了阻塞操作，就会造成累加误差。而setTimeout可以通过将下一个定时器的触发时间修改成上一个定时器的执行结束时间来解决这个问题。例如，下面的代码演示了如何使用setTimeout代替setInterval。

function run() {
  // do something
  setTimeout(run, 1000);
}

setTimeout(run, 1000);

这样做的好处是可以避免定时器的累加误差，并且在代码中可以动态地调整定时器的触发时间。

示例说明

示例一

下面的代码演示了如何使用setInterval实现一个计时器。每隔1秒钟，计时器的秒数加1，并在页面上显示当前的秒数。

let seconds = 0;

setInterval(() => {
  seconds++;
  document.querySelector('#timer').innerText = seconds;
}, 1000);

这个代码看起来很简单，但是实际上存在很大的问题。如果在计时的过程中出现了某种阻塞操作，比如服务器响应时间过长或者一些复杂的计算操作，那么计时器就会因为事件循环机制而出现延迟。

示例二

下面的代码演示了如何使用requestAnimationFrame解决上述问题。这个代码使用了递归调用的方式，在下一帧动画渲染之前更新计时器的状态，并在页面上显示当前的秒数。

let seconds = 0;
let startTime = null;

function updateTimer(timestamp) {
  if (!startTime) startTime = timestamp;

  const elapsedTime = timestamp - startTime;

  if (elapsedTime > 1000) {
    seconds++;
    document.querySelector('#timer').innerText = seconds;
    startTime = timestamp;
  }

  requestAnimationFrame(updateTimer);
}

requestAnimationFrame(updateTimer);

由于requestAnimationFrame的执行时机是由浏览器掌控的，因此无论是否存在阻塞操作，都不会对计时器的准确度造成影响。