Javascript 一次打印一个输出而不是一次打印整个页面？

Question

只是玩了一下，但注意到加载页面的时间太长了，有没有办法让它一次打印一行而不是等到整个页面加载完毕。

limits(){
    var a = 0;

    for (var i = 0; i < 1000; i++) {
        for (var ii = 0; ii < 1000; ii++) {
            document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
            a * 2;

        }
    }
}

现在我如何能够更好地控制它到哪里，无论它需要多长时间才能在准备就绪后立即加载打印，甚至放慢速度也可以。

Answer 1

javascript 方法 window.requestAnimationFrame(callback) 将在下一个动画帧调用您的回调函数。它通常用于动画，并且可能会很好地用于您正在做的事情。

要修改您的代码以使用requestAnimationFrame，您必须让您的函数自行打印一小块，并提供一个引用以了解要打印的 block 。例如，如果您将页面内容存储在一个数组中，那么它可能只是一个起始索引和一个长度。由于您打印的是 2 的递增幂，因此您只需传入 2 的最后一次幂以及函数每次运行要打印的行数。

您还需要一个退出条件——在 limits 内进行检查，如果为真，则返回而不请求下一帧。我只是对 a 的值设置了硬性上限，但您也可以检查索引是否小于数组长度(对于我上面的页面内容数组想法)。

因为 requestAnimationFrame 传入一个函数名作为回调，所以您不能将参数传递给它。因此，您必须使用 bind 将值附加到函数中。然后，在函数内，您可以使用 this 访问它们。 config 只是一个对象，用于保存您希望函数拥有的初始参数，然后绑定(bind)它，这允许您在函数内使用 this.numLines 访问它们和 this.a。

然后，当您请求下一帧时，您必须再次将值绑定(bind)到 limits。如果您不介意保持参数不变，则可以执行 limits.bind(this)。但是如果你想改变它们，你可以用类似于我编写 config 的方式创建另一个对象并绑定(bind)它。

以下代码似乎是您大致要查找的内容的基本示例:

var foo = document.getElementById('foo');
var maxA = 1000000000000000000000000000000000;
function limits() {
    for(var i=0; i<this.numLines; ++i) {
        foo.innerHTML += "<p>" + this.a + "</p>";
        this.a *= 2;
        if(this.a > maxA) {
            return;
        }
    }
    requestAnimationFrame(limits.bind(this));
}

config = {
    numLines: 3,
    a: 1
};
requestAnimationFrame(limits.bind(config));

并在 JSFiddle 中实现 here .我还实现了一个版本，它将每一行都放在页面的顶部(而不是将其附加到底部)，这样您就可以更好地看到它的发生(您可以找到那个 here )。