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

Question

我想运行的代码看起来像这样的伪代码：

1. 将一些 CSS 样式应用到某些元素

2. 做一些其他动作

问题是，我不需要执行“其他操作”，直到我确定浏览器实际上已经呈现了更改后的 CSS 并且对用户可见。

尽管 Javascript 是单线程的，并且如果“其他操作”阻止 Javascript 进一步执行，我认为浏览器仍有望能够使用步骤 1 中设置的新 CSS 值更新视图，即使 Javascript 本身被阻止 - 但这似乎并没有发生（CSS 更改直到步骤 2 之后才会显示 - 在本例中是远程服务调用 - 完成）。

Answer 1

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

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

我认为我在 StackOverflow 上太老了，无法发布链接，否则您可以在这里阅读“掌握 REFRESH() 方法”部分：http://cubiq.org/iscroll-4

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