JS以完美间隔运行函数

Question

我想每 25 毫秒运行一次命令。 setInterval 或 setTimeout 的问题在于它们并不是每 25 毫秒运行一次。如何使间隔准确？

Answer 1

您可以尝试使用requestAnimationFrame 方法。它是一个简单的基于轮询的循环，适合像您自己一样开发游戏。

你可以使用这个有点粗略的实现。

const element = document.getElementById('some-element-you-want-to-animate');
let start;
let cycleCount = 0;

// Set this variable to true when you want to end the loop
let cyclesSetToEnd = false;

// Define the resolution per cycle.
// Number of 1ms cycles after which doSomething is executed.
const resolutionFactor = 25000;

function step(timestamp) {
  if (start === undefined)
    start = timestamp;
  const elapsed = timestamp - start;

  // Check if elapsed time has hit a second
  if (elapsed % resolutionTime > cycleCount) {
    cycleCount = elapsed % resolutionTime;
    // Do time-sensitive update here
    doSomething();
  }

  if (!cyclesSetToEnd) { // Stop the animation after 20 seconds
    window.requestAnimationFrame(step);
  }
}

window.requestAnimationFrame(step);

传递给step 方法的时间戳是DOMHighResTimestamp 其中

...应该以毫秒为单位表示时间，精确到 5 微秒...

注意

如果用户代理由于硬件或软件限制而无法提供精确到 5 微秒的时间值，则用户代理可以将 DOMHighResTimeStamp 表示为精确到毫秒的毫秒时间。