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

Question

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

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

2. 做一些其他的 Action

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

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

Answer 1

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

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

我对 StackOverflow 太陌生了，无法发布链接，我想，否则您可以在此处阅读“掌握 REFRESH() 方法”部分:http://cubiq.org/iscroll-4

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