屏幕未重新绘制，直到功能完成

Question

请查看以下代码：

...
$(document.documentElement).append("<div id='suggestContainer'>Loading...</div>");
$("#suggestContainer").css({
    border: "1px solid black",
    position: "absolute",
    display: "block",
    left: 100,
    top: 100,
    height:100
});
//alert("test");
TimeConsumingFunction();
...

问题： suggestContainer元素不会显示在文档中，直到TimeConsumingFunction调用完成。如果我在TimeConsumingFunction调用之前取消注释alert（test），则会出现警告对话框，我可以看到suggesttionContainer元素显示。

为什么会这样？我尝试了IE和Chrome，它的工作方式相同。 有没有办法刷新HTML并强制显示更改？

由于

Answer 1

我认为它正在发生，因为你正在附加div并且在添加css之后，因此可能没有正确加载到DOM。在css添加后使用setTimeout一秒钟然后调用{{1}或者使用div本身的css即内联。

TimeConsumingFunction();