What's the pattern for calling requestAnimationFrame multiple times per frame?

Question

I have a touch handler that may fire multiple times within a given 16ms time period. On each firing, I set a translate on the element based on the touch position, eg:

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

I understand that calls to rAF queue up, so all three will run for the next frame and set the element's transform property three times. This involves unnecessary extra work – all it needs to do is the most recent one (translate 50px). What's the best way to cancel the first two calls or turn them into no-ops?

Answer 1

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

Store the token returned by the latest requestAnimationFrame, and when you schedule a new handler call cancelAnimationFrame with it.

or turn them into no-ops?

You can just as easily use boolean flags that you check every time. Or maybe you even don't need to re-register a new handler but just can use the one that is already scheduled with the new data.