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

How to detect when the browser has finished updating the view (re-layout, apply any changed CSS)

本文关键字：布局 新布局 应用 任何更 CSS 视图 检测 何检测 浏览器 何时完 更新      更新时间：2023-09-26

我有一个代码，我想运行它看起来像这样的伪代码:

  2. 执行其他操作

问题是，我需要不做'其他动作'，直到我确定浏览器已经实际呈现更改后的CSS，并将对用户可见。

虽然Javascript是单线程的，如果'其他动作'阻止Javascript进一步执行，我认为浏览器仍有望能够更新视图与新的CSS值设置在第1步，即使Javascript本身被阻止-但这似乎没有发生(CSS的变化不显示，直到第2步之后-在这种情况下，远程服务调用-完成)。

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

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

我在StackOverflow上太笨了，不能发布链接，我想，否则你可以在这里阅读"掌握刷新()方法"部分:http://cubiq.org/iscroll-4

"这里我们将刷新调用设置为零超时，这样我们就给了浏览器时间来刷新自己，并且正确地采用了新元素的尺寸。还有其他方法可以确保浏览器实际更新了DOM，但到目前为止，零超时已被证明是最可靠的。"

如果你把Javascript代码放到页面的标题部分，那么Javascript将在网页内容加载之前运行。如果你将Javascript代码放在网页主体部分的函数之外，那么Javascript将在页面加载时运行(当页面加载到达代码时)。在这两种情况下，整个网页都不会被加载-特别是当页面包含大量图像时。

在这里您可以获得更多关于页面事件的信息。

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

有两个独立的javascript文件....在你想要改变css的地方添加一个css，另一个放在页面底部，就在body标签之前，这将确保你的js在页面加载后执行

您可以使用setTimeOut()调用您的远程服务调用函数，从而为浏览器提供非常小的时间间隔，以便在执行保留渲染的函数之前进行渲染吗?

你有例子吗?也许jsFiddle ?

相关文章：