爲什麼元素沒有在警示之前顯示？

在這個簡單的示例中https://jsfiddle.net/4rsje4b6/1/爲什麼#test元素在警告出現之前未顯示？爲什麼元素沒有在警示之前顯示？

不應該jQuery css()方法是syncronous？

#test { 
    display: none; 
}

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

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

UPDATE：

這種行爲體現了我在Chrome版本52.0.2743.116男，10的Windows

來源

2016-08-15 Andrea Casaccia

好吧，它似乎適用於我（Windows 7上的Firefox 47.0.1）。目前無法發送截圖，但在顯示警報時，我可以清楚地看到DOM上呈現的「元素」字。 –

對於我來說，Firefox 47.0.1也適用於我，在Chrome Version 52.0.2743.116 m上觀察到了這種行爲。 –

它改變了風格同步，你會注意到，如果你read back the value on the next line and show it。

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

但樣式對象的變化觸發重繪請求消息的頁面渲染，那就是作爲瀏覽器變爲空閒時，這是該腳本程序結束後儘快處理。

雖然這取決於瀏覽器。在邊緣它工作正常，並且元素立即顯示，但在Chrome和Vivaldi它不是。

查看瀏覽器如何處理此問題的另一個測試：如果您調整瀏覽器窗口大小，JSFiddle將會縮放（每個區域保持相同的相對大小）。如果您在打開警報的情況下調整Vivaldi瀏覽器的大小，則不會這樣做。事實上，如果你把它變小，然後顯示警報，然後將它放大，你只需在新的空間中得到一個灰色區域，直到你關閉消息框。在Edge中，即使整個瀏覽器窗口變爲灰色，小提琴仍會在後臺調整大小，因此這不僅僅是處理時間的問題，而且Chrome還會在警報打開時完全凍結頁面。

來源

2016-08-15 17:45:41 GolezTrol

（+1）換句話說，在某些瀏覽器中，對象的樣式狀態與其在屏幕上的外觀之間的關係具有異步更新的關係，而不管樣式如何更新。 – apsillers

感謝您的回答。這很糟糕。但我想警告對話框不再使用，所以... –

@apsillers確實。另一個測試。 -edit-從評論移到回答 – GolezTrol

爲什麼元素沒有在警示之前顯示？

回答

相關問題