Why doesn't my javascript change the bg color in this while loop?

Question

I am trying to understand the blocking nature of javascript code. I understand javascript is single threaded. So we have to use timers and callbacks for some features.

In this case, I have a loop that is changing the background color. It doesn't change the bg color until the loop ends. Why? Why can't the browser just update the document color?

<script>

 $(document).ready(function(){
    console.log('hi')

    var x = 0;
    var color = 'red';

    while (x< 10000000) {
        x+= 15 ;
        document.body.style.background = color;
    }

});
</script>

Because it's waiting for your script to complete before it bothers re-rendering the page. Rendering each tiny change immediately would be extremely expensive. — deceze, Oct 13 '16 at 14:21
Also… the color changes to red. What else do you expect this to do? — deceze, Oct 13 '16 at 14:21
If you had to wait for the browser to redraw for every change, and not just on ticks, you'd be waiting forever. — adeneo, Oct 13 '16 at 14:22
The operation of rendering is vastly more expensive than running a simple function... — MarcoS, Oct 13 '16 at 14:22
My expectation is that the body color will turn to red as soon as it hits that code on the 1st call? — runners3431, Oct 13 '16 at 14:23
Interesting question, @deceze does it mean that the background color of the body is changed only once or `10000000` times? — Rajshekar Reddy, Oct 13 '16 at 14:24
@Reddy The DOM property is being assigned to some 600,000 times; it's only rendered once at the end. — deceze, Oct 13 '16 at 14:25
Not necessarily 10000000 objectively, probably only in this script. I'm assuming there's a UI flush mechanism that only applies rendering changes once it's done with easier tasks — casraf, Oct 13 '16 at 14:25
@Reddy Why would it be changed `10000` times? It's not even programmed. — kind user, Oct 13 '16 at 14:25
@casraf so what happens if I add a setTimeout and delay each loop? Then it must change the color for every loop right? So it depends on **time** ? — Rajshekar Reddy, Oct 13 '16 at 14:27
@deceze same question ^^ to you.. how does the rendering work? — Rajshekar Reddy, Oct 13 '16 at 14:28
The setTimeout approach is discussed here http://stackoverflow.com/questions/19058858/jquery-append-in-loop-dom-does-not-update-until-the-end — Drumbeg, Oct 13 '16 at 14:29
@Reddy Browser recognises script has finished, browser checks if DOM tree is dirty (has changed), browser figures out the changes to the last rendered DOM tree, browser redraws the changed elements. (Very roughly speaking.) — deceze, Oct 13 '16 at 14:32
@Drumbeg that link was helpful mate.. Made the understanding much more clear..Thanks — Rajshekar Reddy, Oct 13 '16 at 14:38

ianaya89 · Answer 1 · 2016-10-13T15:13:07.680

0

The problem is that the repaint browser process will not by trigger until your loop ends. This process is the one in charge to apply visibility changes to DOM. You can try wrapping your code inside a setTimeout function. It will delay your execution time but I think it will repaint flows:

while (x< 10000000) {
  setTimeout(function() {
    x+= 15 ;
    document.body.style.background = color;
  }, 100);
}

edited Oct 13 '16 at 15:13

answered Oct 13 '16 at 14:29

ianaya89

4,153
3
26
34

So with blocking processes like a while loop, any visible changes to the dom will not update until after it exits the loop? – runners3431 Oct 13 '16 at 14:30
Yes, that is the expected behavior. http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ – ianaya89 Oct 13 '16 at 14:33

score 0 · Answer 2 · answered Oct 13 '16 at 14:32

0

Dom operations will be pushed to stack and should start pulling it at end of execution and in your case changing the background color is the first Dom operation in stack so once while is done, changing background color operation will be pulled and effect.

answered Oct 13 '16 at 14:32

mohamed-ibrahim

10,837
4
39
51

Why doesn't my javascript change the bg color in this while loop?

2 Answers2