javascript - requestAnimationFrame 的触发频率远高于 60 fps

Question

我正在使用 requestAnimationFrame 在 mousemove 上对页面的一部分进行动画处理。我刚才遇到的一个问题是，如果 mousemove 事件发生的速度比预期的每秒 60 次(我的显示器刷新率)要快得多，那么它调用绘图代码的频率就会远远高于预期。

这似乎取决于您使用的鼠标，但使用我当前的鼠标，如果我移动速度相对较快，我可以轻松地在同一帧内获得 10 个 mousemove 事件。我的理解是 requestAnimationFrame 每帧应该只触发一次绘图函数，无论调用的频率如何。

现在，在一帧内调用我的绘图代码 10 次对于性能来说显然很糟糕，所以我需要摆脱它。我是否必须按照设计手动处理这个问题？我对 requestAnimationFrame 的理解是否错误，这是正确的行为，还是我在这里缺少什么？ requestAnimationFrame 应该如何工作？

Answer 1

My understanding was that requestAnimationFrame should only trigger the drawing function once per Frame, no matter how often it is called.

这就是你的理解误导了你的地方。

requestAnimationFrame方法实际上会堆叠每个函数并在同一帧中执行它们。

因此，如果您在同一帧中调用 30 次 requestAnimationFrame(func) ，那么 func 将在下一帧调用 30 次。 这些函数甚至似乎合并到同一个调用中，因为它们确实共享相同的 time 参数。

var funcA = function(time) {
  snippet.log('funcA executed at ' + time);
  snippet.log('exact time: ' + performance.now())
}
var funcB = function(time) {
  snippet.log('funcB executed at ' + time);
  snippet.log('exact time: ' + performance.now())
}


snippet.log('funcA stacked at ' + performance.now())
requestAnimationFrame(funcA);
// block the process for some time
var i = 0;
while (i++ < 10000000) {}

snippet.log('funcB stacked at ' + performance.now())
requestAnimationFrame(funcB);

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

为了避免它，例如要进行去抖，您需要使用一些标记，当 rAF 执行时您将释放这些标记。