Question

我正在使用requestAnimationFrame为mousemove上的部分页面设置动画。我刚才遇到的一个问题是，如果mousemove事件发生的速度比那个快得多，它会比预期的每秒60次（我的显示器刷新率）更频繁地调用绘图代码。

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

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

Answer 1

我的理解是requestAnimationFrame应该每帧只触发一次绘图函数，无论它被调用的频率如何。

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

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

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

＆＃13;

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);

＆＃13;

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

＆＃13;

要避免它，例如要进行去抖动，你需要使用一些标记，你将在rAF执行时释放。

requestAnimationFrame的触发频率远远超过60 fps

1 个答案: