Question

Opening an modal dialog box on a browser page, stops the page from redrawing.
Scripts started asynchronously run uninterrupted in the background.

I illustrate the behaviour in this JSfiddle http://jsfiddle.net/YNbux/. The box stops its animation when the alert() is shown and jumps in the animation when the alert is closed.

This behaviour is present in (on my computer at least):

• Chrome 21.0.1180.82
• Opera 12.01
• Safari 6.0

So I guess it is intended behaviour – but causes animations to jump, and other things that would seem as glitches to an end user. So why does alert() and confirm() stop pages from redrawing?

Edit:
gif-images also stop redrawing: http://jsfiddle.net/YNbux/4/

Answer 1

Those functions are blocking functions. Your JavaScript stops executing until they return.

Your animations and what not in the background are not completely separated from your code calling alert(). Code that appears to be asynchronous still need to execute in the loop, and if some code blocks that loop, they will not run on their own. This is critical to proper operation of your code.