javascript - Why is element not being shown before alert? - Stack Overflow

admin管理员组

文章数量:1302409

In this simple example / why is the #test element not being shown before the alert appears?

Shouldn't the jQuery css() method be syncronous?

#test {
  display: none;
}

<span id="test">Element</span>

$("#test").css("display", "inline");
alert("Showed element!");

UPDATE:

This behavior is manifesting for me on Chrome Version 52.0.2743.116 m, Windows 10.

In this simple example https://jsfiddle/4rsje4b6/1/ why is the #test element not being shown before the alert appears?

Shouldn't the jQuery css() method be syncronous?

#test {
  display: none;
}

<span id="test">Element</span>

$("#test").css("display", "inline");
alert("Showed element!");

UPDATE:

This behavior is manifesting for me on Chrome Version 52.0.2743.116 m, Windows 10.

• javascript
• jquery
• css

Share Follow edited Aug 16, 2016 at 13:19 Legionar 7,60733 gold badges4444 silver badges7171 bronze badges asked Aug 15, 2016 at 17:42 Andrea CasacciaAndrea Casaccia 4,97144 gold badges3333 silver badges5555 bronze badges 3

• Well, it seems to work for me (Firefox 47.0.1 on Windows 7). Can't send you a screenshot right now but I can clearly see the "Element" word rendered on the DOM while the alert is shown. – Roberto Linares Commented Aug 15, 2016 at 17:46
• Yep works for me too in Firefox 47.0.1, behavior has been observed on Chrome Version 52.0.2743.116 m. – Andrea Casaccia Commented Aug 15, 2016 at 17:49
• Same Issue I am facing too. Someone can help that how can use or fixed it for Chrome Browser? here is the example narendra-pal-singh.github.io/Web-Development/html/divBox.html – npsingh Commented Feb 23, 2020 at 13:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

It changes the style synchronously, and you will notice that if you read back the value on the next line and show it.

$("#test").css("display", "inline");
alert("Showed element!" + $("#test").css("display"));

But the change of the style object triggers a repaint request message to the page renderer, and that is handled as soon as the browser bees idle, which is after this script routine has ended.

It depends on the browser, though. In Edge it works fine, and the element is shown right away but in Chrome and Vivaldi it is not.

Another test to see how browsers handle this: If you resize the browser window, JSFiddle will scale (each of the areas keeps the same relative size). If you resize the Vivaldi browser with the alert open, it doesn't do that. In fact if you make it small, then show the alert, then make it larger, you just get a grey area in the new space until you close the message box. In Edge, the fiddle will just resize in the background, even though the entire browser window is grayed out, so it's not just a matter of the time of processing, but more that Chrome pletely freezes the page when an alert is open.

本文标签： javascriptWhy is element not being shown before alertStack Overflow