如何在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

As stated earlier,the browser may cache several changes for you,and
reflow only once when those changes have all been made. However,note
that taking measurements of the element will force it to reflow,so
that the measurements will be correct. The changes may or may not not be visibly repainted,but the reflow itself still has to happen behind the scenes.