每帧多次调用 requestAnimationFrame 的模式是什么？

Question

我有一个触摸处理程序可能会在给定的 16 毫秒时间段内触发多次。在每次触发时，我都会根据触摸位置在元素上设置一个翻译，例如：

at 2ms, translate 20px
at 5ms, translate 40px
at 10ms, translate 50px

我知道对 rAF 的调用会排队，所以所有三个都将 运行 用于下一帧并设置元素的转换 属性 三次。这涉及不必要的额外工作——它需要做的只是最近的一个（翻译 50px）。取消前两个调用或将它们变成空操作的最佳方法是什么？

Answer 1

What's the best way to cancel the first two calls

存储最近 requestAnimationFrame 返回的令牌，并在您安排新的处理程序调用时使用它 cancelAnimationFrame。

or turn them into no-ops?

您可以轻松地使用每次检查的布尔标志。或者您甚至不需要重新注册新的处理程序，而只需使用已经为新数据安排的处理程序。