以 60fps 运行功能答案

【问题标题】：Run function at 60fps以 60fps 运行功能
【发布时间】：2021-10-01 07:20:54
【问题描述】：

我目前正在使用setInterval( () => {}, 16 ) 以 60 fps 运行我的代码，但这会使代码以 62.5 fps 运行，这使得游戏动作以每秒几帧的速度向前跳跃两倍。使用间隔 17 会使游戏移动每隔一段时间冻结一帧。

如何才能真正以 60fps 的速度运行代码以获得最大的流畅度？

【问题讨论】：

1000/60 呢？
使用 JS 游戏引擎，如 Babylon.js / Phaser 3 / 等 -> html5gamedevs.com setInterval 可以漂移。
帧率取决于代码的速度和运行代码的机器。您不能只设置一个计时器并期望在每台设备上都具有相同的帧速率。
@tempacc 很好，但为什么要重新发明轮子呢？有时你必须承认你的方法很糟糕，但有更好的解决方案。
@Marc 好吧，我用 Javascript 编写游戏以使其尽可能轻巧，（并学习画布），是的，这种方法很糟糕，但我想我会在不重写的情况下让它顺利进行整场比赛。（将使用 Window.requestAnimationFrame 与 0 和 deltatime）

标签： javascript setinterval frame-rate

【解决方案1】：

使用Window.requestAnimationFrame([callback])

这样一来，无论显示器是 30hz、60hz 还是 120hz 或更高，都会在渲染时调用您的应用程序。

如果 MDN 文档不够清晰，请参阅 https://css-tricks.com/using-requestanimationframe/ 中的此示例了解如何使用它。

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

  globalID = requestAnimationFrame(repeatOften);

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});
$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

div {
  width: 10px;
  height: 10px;
  background: orange;
  float: left;
}

button {
  position: absolute;
  top: 20px;
  left: 20px;
}
#stop {
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="start">start</button>
<button id="stop">stop</button>

【讨论】：

这结合 deltatime 解决了这个问题。谢谢。