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

时间:2015-05-18 03:13:12

标签: javascript javascript-events css-animations requestanimationframe

我有一个触摸处理程序,可能会在给定的16ms时间内多次触发。在每次射击时,我根据触摸位置设置元素的平移,例如:

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

我理解对rAF的调用排队,因此所有三个都将运行下一帧并将元素的transform属性设置三次。这涉及不必要的额外工作 - 它需要做的就是最近的工作(翻译50px)。取消前两个电话或将其变为无操作的最佳方法是什么?

1 个答案:

答案 0 :(得分:1)

  

取消前两个电话的最佳方法是什么

存储最新requestAnimationFrame返回的令牌,并在计划新的处理程序时调用cancelAnimationFrame

  

或将它们变成无操作?

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