毫秒级正向计时器：释放 requestAnimationFrame 的潜力

2023-09-18 01:26:13

引言

在当今快节奏的数字世界中，精确的时间测量对于各种应用程序至关重要。从动画和游戏到科学计算和交易系统，毫秒级的准确度往往是实现最佳用户体验和可靠性的关键。

然而，JavaScript 中的传统计时器 API（如 setTimeout 和 setInterval）受限于浏览器的刷新率，通常只能提供大约 10 毫秒的精度。为了实现更精细的计时，我们需要探索其他途径。

requestAnimationFrame：高精度计时之门

requestAnimationFrame (rAF) 是一个强大的 Web API，它允许我们请求浏览器在下一帧之前调用指定的回调函数。由于现代浏览器通常以 60 FPS（每秒 60 帧）运行，rAF 可提供高达 16.67 毫秒的精度。

利用 rAF 创建毫秒级正向计时器

为了利用 rAF 创建正向计时器，我们需要一个累积的时间值来跟踪自开始以来的经过时间。以下是如何实现的步骤：

初始化： 在计时器开始时，将累积时间值设置为 0。
递归回调： 使用 rAF 设置一个递归回调函数，该函数在每一帧都更新累积时间值。
累积时间： 在回调函数中，通过当前时间戳与上一次调用的时间戳之差，将时间增量添加到累积时间值中。
停止计时： 当用户点击停止按钮时，停止 rAF 循环，并记录最终的累积时间值。

代码示例

let startTime = 0;
let elapsedTime = 0;

const timer = () => {
  const currentTime = performance.now();
  elapsedTime += currentTime - startTime;
  startTime = currentTime;
  requestAnimationFrame(timer);
};

// 开始计时
startTime = performance.now();
requestAnimationFrame(timer);

// 停止计时
cancelAnimationFrame(requestAnimationFrameId);
console.log(`Elapsed time: ${elapsedTime} milliseconds`);