How to check (automatically) that the operation occurs after the browser is redrawn?

Question

According to the comments on this blog post, the following method performs the operation asynchronously, but is waiting for redrawing:

function nextTick(callback) { var img = new Image; img.onerror = callback; img.src = 'data:image/png,' + Math.random(); } 

whereas this one does not wait for redrawing:

 var mc = new MessageChannel; function nextTick(callback) { mc.port1.onmessage = callback; mc.port2.postMessage(0); } 

How can I check this, programmatically, so that I can check the automatic tests running on multiple platforms / browsers?

Answer 1

You can use requestAnimationFrame instead of the blog workaround.

Read more on the Paul Irish blog at http://paulirish.com/2011/requestanimationframe-for-smart-animating/