javascript - 如何在 webkit 1.2.5 中的 javascript 中强制回流

我已经尝试了所有应该调用回流的方法，但这并没有发生。我调用了 10 次测试函数以在屏幕上绘制一些元素，然后在每次迭代中移动该元素。该循环立即执行，最后我得到一张图片，而不是在屏幕上看到元素的移动。

就好像所有工作都完成后，会调用回流和在屏幕上绘图。但我想看每张图。

我尝试过的所有事情都没有给出任何结果。唯一有效的是alert()，但我不需要与用户交互。

如果有帮助，我正在使用 webkit 1.2.5。

如果我不够理解，我会尽量解释得更好。

这是我强制重排的代码

 var i = 0;
 for(;i<500;i+=50){
fTestInfo(i);
console.log("Test loop!!! "+i);
 }

我需要的是每次执行 fTestInfo(i) 时都会在我的屏幕上看到一张图片，但相反，我只看到了最终结果。

fTestInfo 取决于 i 它向左移动 i 的值。

最佳答案

我看到您正在使用 for 循环，这通常意味着您误解了计时器的工作方式。 for 循环是同步执行的，您可能正在一次设置所有计时器。

试试这个:

(function loop(i) {
    if (i >= 500) {
        return;
    }
    document.querySelector("div").style.left = i + "px";
    setTimeout(function() {
        loop(i + 1);
    }, 16);
})(0);

演示 http://jsfiddle.net/UCfmF/

我想你的意思是得到一个像 .offsetWidth 这样的值？这不能保证在屏幕上进行可见的回流，浏览器可能会等待一段时间(阅读:直到 javascript 执行停止)，然后才实际尝试在屏幕上绘制任何内容，即使您正在执行触发回流的操作。

这意味着如果向文档追加 1000 个元素，则不会触发 1000 次回流。即使您在每次迭代之间获取 .offsetWidth 。它只会为您计算，但不一定要绘制。

您需要使用计时器移动元素，因为 javascript 执行结束是浏览器清除任何排队的回流时。

见 http://dev.opera.com/articles/view/efficient-javascript/?page=3#reflow

关于javascript - 如何在 webkit 1.2.5 中的 javascript 中强制回流，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11799359/