javascript - 基于网络的计时器

Question

有没有办法在浏览器中创建一个变速计时器，它会为所有操作系统和浏览器提供完全相同的结果？如果我希望每个用户每分钟 140 次节拍，而不管他们的计算机速度如何。

我一直在使用 javascript setTimeout() 和 setInterval()，但我认为它们取决于计算机的速度和程序中的代码量。如何将系统时钟整合到浏览器中？或者有什么其他想法？

Answer 1

您必须在您的解决方案中使用 setTimeout 或 setInterval，但由于以下原因它会不准确:

1. 浏览器有一个最小超时时间，不是 0 毫秒。跨浏览器的最小值约为 14 毫秒。
2. 计时器不准确。它们代表排队时间，而不是执行时间。如果您的计时器触发时有其他事情正在执行，您的代码将被推送到队列中等待，并且可能要等到很久以后才会真正执行。

您可能想要使用 setTimeout 以及手动跟踪当前时间(使用 Date)来逐步执行您的程序。对于您的情况，请尝试这样的事情:

function someAction(delta) {
  // ...
}

function beat() {
  var currentTime = +new Date;
  var delta = currentTime - pastTime;

  if (delta > 430) { // 430ms ~ 140bpm
   pastTime = currentTime;
   someAction();
  }

  setTimeout(beat, 107); // 4x resolution
}

var pastTime = +new Date;
beat();

这应该约为每分钟 140 次，使用更高的分辨率以避免更大的延迟。不过，这只是一个示例，您可能需要进行更多的工作才能使其针对您的应用程序发挥最佳性能。