Question

我已经尝试过应该调用回流的所有东西但是没有发生。我正在调用我的测试函数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的值。

Answer 1

我看到你正在使用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执行停止），然后才会在屏幕上绘制任何内容，即使您正在执行触发重排的操作。

< / p>

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

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

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

如前所述，浏览器可能会为您缓存多项更改，以及当这些变化全部完成后，只回流一次。但请注意测量元素将迫使它回流，所以测量结果是正确的。变更可能会也可能不会显然重新粉刷，但回流本身仍然必须落后场景。

Answer 2

您需要为浏览器提供在每次迭代之间输入事件循环的机会。

使用setTimeout来安排绘图的每次迭代：

function scheduledTestInfo(i) {
    setTimeout(function() {
        fTestInfo(i);
    }, i);  // calls each function 50ms apart
}

var i = 0;
for ( ; i < 500 ; i += 50) {
    scheduledTestInfo(i);
}

如何在webkit 1.2.5中强制重写javascript

2 个答案: