javascript - One requestAnimationFrame invoked per redraw or multiple? -

javascript - One requestAnimationFrame invoked per redraw or multiple? -

what happens when there multiple requestanimationframe callbacks in relation screen redraws?

with 2 requestanimationframe blocks i.e.

(function a() { requestanimationframe(a); }()) (function b() { requestanimationframe(b); }())

will sequence of execution be:

1:

-> -> b -> screen redrawn -> -> b -> screen redrawn ...

2:

-> -> screen redrawn -> b -> screen redrawn -> -> screen redrawn ...

that's interesting question. based on read, mozbeforepaint event should fired each registered callback before proceeding next frame. test, modified code (fiddle):

html

<button id="start">start</button> <button id="stop">stop</button>

css

var aid, bid; function a(ts) { console.log('a', ts); aid = requestanimationframe(a); } function b(ts) { console.log('b', ts); bid = requestanimationframe(b); } var startbutton = document.getelementbyid('start'); var stopbutton = document.getelementbyid('stop'); function stop() { window.cancelanimationframe(aid); window.cancelanimationframe(bid); } function start() { a(); b(); } startbutton.addeventlistener('click', start); stopbutton.addeventlistener('click', stop);

the output after clicking start seems confirm expectation. first invocation of a() , b() log undefined timestamps, because they're starting animation straight rather responding callback. each subsequent invocation of a() logs domhighrestimestamp matches 1 logged invocation of b(), suggesting it's same event firing both callbacks.

output

a undefined b undefined 123182.04999999944 b 123182.04999999944 123198.73199999893 b 123198.73199999893 123215.22000000004 b 123215.22000000004 123231.9179999995 b 123231.9179999995 123248.59099999958 b 123248.59099999958 123265.21899999898 b 123265.21899999898

caveats:

i have no specific firsthand knowledge of implementations; interpretation of documentation , test this test executed in mac os x chrome 35; other browsers may produce different results

javascript html5