JS alert function executed before if condition modifying the DOM even though alert is inside if . Why?

Question

Why in this jQuery example, jsFiddle alert function is executed before jquery modifying the .parent's background even though if(p.css('background-color', 'yellow')) is evaluated first.

CSS

.parent {
  width: 400px;
  padding: 10px;
  margin: 10px;
  border: 1px solid;
  background-color: green;
}

HTML

<div class="parent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti qui esse illum, unde labore. Repellendus sunt, quidem eligendi aliquid architecto animi officia itaque ducimus impedit, enim laudantium quis, cupiditate optio.</div>

jQuery

var p = $('.parent');
p.css('border', '3px solid blue');

if(p.css('background-color', 'yellow')){
    alert('cool')
  } else {
  alert( 'Not COOL')
  }

jsFiddle

Thanks

`Why {...} alert function is executed before jquery modifying the .parent's background`. It isn't but because `window.alert` is modal, the UI has no time to be redrawn before the modal block the UI. AND setting a CSS property in an `if` condition has no real use case meaning because it will always be evaluated as truthly value — A. Wolff, Dec 09 '17 at 15:02
p.css('background-color', 'yellow') sets the color to yellow. Hence the alert is executed after setting the color — Vineet Desai, Dec 09 '17 at 15:02
you could wrap you alert in a setTimeout function, do delay it — JiiB, Dec 09 '17 at 15:03
See what @JiiB meant: https://jsfiddle.net/5gahLa6w/1/ Using a timeout, you put function callback in the event queue, letting the browser to firstly repaint the UI — A. Wolff, Dec 09 '17 at 15:08
@VineetDesai The alert is executed after setting the color but before the color is drawn on screen — slebetman, Dec 09 '17 at 15:11

slebetman · Answer 1 · 2017-12-09T15:50:51.757

The browser does not update the graphics when you modify the DOM. It only does so when there's no more javascript to execute. This process is called reflow.

Basically this is how the browser works:

Event loop
    ┌──────────┐
    │          │
    │          │
    │          ▼
    │        check if there's any new ───────▶ parse data
    │        data on the network                    │
    │          │                                    │
    │          ▼                                    │
    │        check if we need to execute  ◀─────────┘
    │        any javascript ──────────────────▶ execute
    │          │                               javascript
    │          ▼                                  │
    │        check if we need to ◀────────────────┘
    │        redraw the page  ──────────────▶ redraw page
    │          │                                   │
    │          │                                   │
    └────◀─────┴─────────────────◀─────────────────┘

However, by definition the alert() function does not wait for reflow and interrupts the execution of javascript.

Therefore when you change the background color to yellow the following happens:

DOM is modified and the background is changed to yellow
Alert is called and the alert dialog is displayed
Other bits of javascript is executed until there's nothing else to execute
Reflow is triggered and the browser finally draws the yellow background to screen

Reflow behaves this way as an optimization. Constantly redrawing everything potentially slows down browsers so even if reflow isn't described by the specification the very fact that Microsoft, Mozilla, Google and Apple are constantly competing to be the best browser means the over time reflow becomes more and more a batch process.

For more info see https://stackoverflow.com/questions/19815810/avoiding-html-document-reflows/19816067#19816067 and https://stackoverflow.com/questions/19616477/does-javascript-process-using-an-elastic-racetrack-algorithm/19620041#19620041 — slebetman, Dec 09 '17 at 15:12
That's really a well explained answer with simple&great visual — A. Wolff, Dec 09 '17 at 15:13

JS alert function executed before if condition modifying the DOM even though alert is inside if . Why?

1 Answers1