为什么在警报之前没有显示元素？ [英] Why is element not being shown before alert?

问题描述

在这个简单的例子中， https://jsfiddle.net/4rsje4b6/1/ 为什么是警告出现之前 #test 元素未显示？

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

不应该是jQuery css（）方法是同步的吗？

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

#test {
  display: none;
}

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

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

更新：

我在Chrome版本52.0.2743.116 m，Windows 10上显示此行为。

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

推荐答案

它会同步更改样式，您会注意到，如果您回读下一行的值并显示它。

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 becomes idle, which is after this script routine has ended.

但这取决于浏览器。在Edge中它工作正常，元素立即显示但在Chrome和Vivaldi中它不是。

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.

另一个测试，看看浏览器如何处理这个：
如果您调整浏览器窗口的大小，JSFiddle将缩放（每个区域保持相同的相对大小）。如果您在打开警报的情况下调整Vivaldi浏览器的大小，则不会这样做。事实上，如果你把它变小，然后显示警报，然后将其放大，你只需在新空间中获得一个灰色区域，直到你关闭消息框。在Edge中，小提琴只会在后台调整大小，即使整个浏览器窗口都显示为灰色，所以这不仅仅是处理时间的问题，而是当警报打开时，Chrome会完全冻结页面。

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 completely freezes the page when an alert is open.

这篇关于为什么在警报之前没有显示元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！