I'm proposing a couple of companion APIs to the already standardized 
`requestAnimationFrame(..)` API.


First: https://gist.github.com/getify/5130304

`requestEachAnimationFrame(..)` and `cancelEachAnimationFrame(..)`

This is the analog to `setInterval(..)`, in that it runs the handler 
automatically for every animation-frame, instead of requiring you to re-queue 
your function each time. Hopefully that could be made slightly more performant 
than the manual re-attachment, and since this is often a very tight loop where 
performance really does matter, that could be useful.

It will make animation loops, frame-rate detection, and other such things, a 
little easier, and possibly slightly more performant. The code linked above has 
the polyfill (aka "prollyfill" aka "hopefull-fill") logic.


------------------


Second: https://gist.github.com/getify/3004342#file-naf-js

`requestNextAnimationFrame(..)` and `cancelNextAnimationFrame(..)`

`requestNextAnimationFrame(..)` queues up a function not for the current 
upcoming animation-frame, but for the next one. It can be accomplished by 
nesting one rAF call inside another, as the polyfill implies, but again, my 
presumption is that this sort of logic is not only more awkward but also 
possibly slightly less efficient than if it were built-in as I'm proposing.

Why would we need this? Well, there are some sorts of CSS-based tasks which end 
up getting automatically batched-together if they happen to be processed in the 
same rendering pass. For example: if you want to unhide an element (by setting 
display:block) and then tell the element to move via a CSS transition (say by 
adding a class to it). If you do both those tasks in the same rendering pass, 
then the transition won't occur, and the repaint will show the element at its 
final location. Bummer. So, I have to first unhide it in the current 
animation-frame, and then add the class for the transition to the *next* 
animation-frame.

Do that kind of thing enough times (which I have), and you start wishing there 
was a codified API for it, instead of my hack. Thus, my simple proposal here.




--Kyle




Reply via email to