Jquery expects for loop to complete before executing previous events

Question

I have a function that fires on a click event. An overlay is displayed inside the first line of the function, and after that there is a for loop. I expect the function to show the overlay first and then continue the for loop. Instead, the overlay appears only after the for loop completes.

Here is jsFiddle Link

$(document).on("click",function(){ $("h1").text("Clicked"); for(var i=0;i<100000;i++){ console.log(i); } }) 

Answer 1

Use setTimeout() to delay between overlay and for loop

https://jsfiddle.net/b9m5spxu/

Answer 2

the view will not be updated in the same thread or in the same thread of execution. he will use the invalidation technique. which means that update updates are delayed for a while, so we can do a bunch of updates with minimal effort.

javascript is a single-threaded way, so viewing the update will wait for the loop to complete.

Answer 3

Here is a good article explaining this behavior (ths @subash for help): http://javascript.info/tutorial/events-and-timing-depth

JavaScript execution and rendering

In most browsers, rendering and JavaScript use a single event queue. This means that JavaScript is not rendering while running.

Check out the demo below. When you click run, the browser may stop for some time because it changes div.style.backgroundColor from

A00000 to #FFFFFF.

In most browsers, you see nothing until the script ends, or until the browser pauses it with a message in which "w370" has been running for a long time.

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 that the div is redrawing. Not every change causes a redraw, possibly due to Opera’s internal planning. This is because event queues for rendering and JavaScript are different in this browser.

In other browsers, redrawing is delayed until JavaScript finishes.

Again, the implementation may be different, but usually the nodes are marked as "dirty" (they want to be recounted and redrawn), and repaint is queued. Or the browser can simply search for dirty nodes after each script and process them.

Immediate overflow The browser has many optimizations to speed up rendering and painting. As a rule, he tries to postpone them until the script is completed, but for some actions, node reloads are required immediately.

For example: elem.innerHTML = "new content" (elem.offsetHeight) // <- rerenders elem to get offsetHeight. In the above example, the browser has to relay to get the height. But it does not need to repaint ale on the screen.

Sometimes other dependent nodes may be involved in the calculations. This process is called reflow and can consume a lot of resources if the script calls it often.

Of course, much more talk about rendering. It will be covered in a separate article [todo].