I have a function which is triggered on a click event. Inside the function first line is to show an overlay, and after that there is a for loop. I expect the function to show the overlay first and then continue with the for loop. Instead overlay is being shown only after the for loop completes.
Here is the jsFiddle Link
$(document).on("click",function(){
$("h1").text("Clicked");
for(var i=0;i<100000;i++){
console.log(i);
}
})
view will not update in the same thread or in same flow of execution. it will use invalidation technique. which means view updates postpone for some time, thats way we can do bunch of update in a minimal effort.
javascript is single threaded fashion, so view update will wait until for loop finish.
Use setTimeout() to have a delay between the overlay and for loop
Here is a good article that explains this behavior (thks @subash for the hint): http://javascript.info/tutorial/events-and-timing-depth
JavaScript execution and rendering
In most browsers, rendering and JavaScript use single event queue. It means that while JavaScript is running, no rendering occurs.
Check it on the demo below. When you press run, the browser may halt for some time, because it changes div.style.backgroundColor from
A00000 to #FFFFFF.
In most browsers, you see nothing until the script finishes, or until the browser pauses it with a message that ‘a script is running too long’.
The exception is Opera.
<div style="width:200px;height:50px;background-color:#A00000"></div>
<input type="button" onclick="run()" value="run()">
<script> function run() { var div =
document.getElementsByTagName('div')[0] for(var
i=0xA00000;i<0xFFFFFF;i++) {
div.style.backgroundColor = '#'+i.toString(16) } } </script>
In Opera, you may notice div is redrawn. Not every change causes a repaint, probably because of Opera internal scheduling. That’s because event queues for rendering and JavaScript are different in this browser.
In other browsers the repaint is postponed until the JavaScript finishes.
Again, the implementation may be different, but generally the nodes are marked as “dirty” (want to be recalculated and redrawn), and repaint is queued. Or, the browser may just look for dirty nodes after every script and process them.
Immediate reflow The browser contains many optimizations to speedup rendering and painting. Generally, it tries to postpone them until the script is finished, but some actions require nodes to be rerendered immediately.
For example: elem.innerHTML = 'new content' alert(elem.offsetHeight) // <-- rerenders elem to get offsetHeight In the case above, the browser has to perform relayouting to get the height. But it doesn’t have to repaint elem on the screen.
Sometimes other dependant nodes may get involved into calculations. This process is called reflow and may consume lots of resources if script causes it often.
Surely, there’s much more to talk about rendering. It will be covered by a separate article [todo].
