Question

我有我想运行的代码，看起来像这个伪代码：

将一些CSS样式应用于某个元素
做一些其他行动

问题是，在我确定浏览器实际上已经渲染了已更改的CSS并且对用户可见之前，我不需要执行“其他操作”。

虽然Javascript是单线程的，如果“其他操作”阻止Javascript进一步执行，我认为浏览器仍然可以使用步骤1中设置的新CSS值更新视图，甚至如果Javascript本身被阻止 - 但似乎没有发生（CSS更改直到第2步之后才显示 - 在这种情况下是远程服务调用 - 完成）。

Answer 1

添加到Grezzo的注释，您可以使用JS超时0来确保前一行代码已完成执行。这是有效的，因为它将setTimeout的闭包内的任何内容放在要运行的内部代码队列的最末端。 E.g。

// Update CSS  
$('#mydiv').css({'position' : 'relative', 'top' : 0});
setTimeout(function() {
    funcToRunAfterUIUpdate()
}, 0);

我认为StackOverflow上的n00b过于发布一个链接，我想，否则你可以在这里阅读“掌握刷新（）方法”部分：http://cubiq.org/iscroll-4

“这里我们将刷新调用置于零超时，这样做我们给了浏览器刷新自身的时间，并且正确地采用了新元素维度。还有其他方法可以确保浏览器实际更新DOM，但是事实证明，零超时已经证明是最坚实的。“

Answer 2

如果您将Javascript代码放在功能之外的页面的head部分，那么Javascript将在加载网页内容之前运行。如果您将Javascript代码放在网页正文部分的函数之外，那么Javascript将在页面加载时运行（当页面加载到达代码时）。在这两个实例中，整个网页都不会被加载 - 特别是如果页面包含大量图像。

在这里你可以获得更多信息aboun page events。

http://javascript.about.com/library/bltut31.htm

Answer 3

有两个单独的JavaScript文件.... 将css添加到您想要更改css的位置，将另一个添加到正文标记之前的页面底部，这将确保您的js在页面加载后稍后执行

Answer 4

您是否可以使用setTimeOut()来调用远程服务调用函数，从而在执行保持渲染的函数之前为浏览器提供一个非常小的时间间隔进行渲染？

你有一个例子吗？ jsFiddle也许？

如何检测浏览器何时完成视图更新（重新布局，应用任何更改的CSS）

4 个答案: