如何在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);
 }

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

试试这个：

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

​
演示

我想您的意思是获得一个值，如
.offsetWidth
？这不能保证在屏幕上出现可见的回流，浏览器可能会等待一段时间（读取：直到javascript执行停止），然后才实际尝试在屏幕上绘制任何内容，即使您正在执行触发回流的操作

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

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

看

如前所述，浏览器可能会为您缓存多个更改，并且
当这些更改全部完成时，仅回流一次。但是，请注意
对元件进行测量会迫使其回流，所以
测量结果将是正确的。变化可能会，也可能不会
可以明显地重新喷漆，但回流本身仍必须发生在后面
场景

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

使用
setTimeout
计划图形的每次迭代：

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

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

功能计划测试信息（i）{
setTimeout（函数（）{
fTestInfo（i）；
}，i）；//分别调用50毫秒的每个函数
}
var i=0；
对于（；i<500；i+=50）{
附表一；
}
你确定你不仅仅是在一眨眼的功夫就把它制作成动画吗？而且，没有一些示例代码，我们有点不知所措。我编辑了原始帖子。我知道这一点，回流是如何工作的，我知道我可以做1000个元素，它只能执行一次回流。我尝试了定时器，我把它放在日志和函数之间，但我只会等待更长的时间，结果是一样的。是否有一些我可以引发的事件，而这些事件是不可见的，并且会强制回流和绘制？@Shakal187显示您的代码，您当前只是循环，没有使用超时。我在将其实现到代码中时遇到问题。我是否需要在函数循环（I）之前使用括号？我真的是个新手javascript@Shakal187是的，你需要我所有的东西，当然除了返回的条件可能不同，超时值和div的操作。好的，谢谢。我还有一个问题。这是最有效的方法吗？我的意思是，有没有更快的解决方案？请注意，如果没有，这将不起作用他
i
的值一次增加不到13。同时多次超时而不是将其链接到imo:Pyeah，我知道。最好不要尝试在8小时时差时编码：(