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

只是玩了一会儿，但注意到页面加载时间太长，是否可以让它一次打印一行，而不必等到整个页面加载完毕

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;

        }
    }
}

limits（）{
var a=0；
对于（变量i=0；i<1000；i++）{
对于（var ii=0；ii<1000；ii++）{
document.getElementById（'foo'）.innerHTML+=“”+a+”
”；
a*2；
}
}
}

---

现在，我怎样才能更好地控制它到哪里，而不管它需要多长时间来加载打印，只要准备好，甚至放慢速度都可以

您可以这样做：

limits(){
    var a = 0;

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

        }
    }
}

limits（）{
var a=0；
对于（int i=0；i<1000；i++）{
对于（int ii=0；ii<1000；ii++）{
setTimeout（函数（）{
document.getElementById（'foo'）.innerHTML+=“”+a+”
”；
a*2；
}, 0);
}
}
}

---

您可以在setTimeout中调整时间，但即使将其保留为零，也可以在页面生成时提供更具交互性的体验。如果您愿意，将其设置为10或100当然会大大降低速度。

javascript方法

窗口。requestAnimationFrame（回调）

将在下一个动画帧调用回调函数。它通常用于动画，并且可能对您正在做的事情很有效

要将代码修改为使用

requestAnimationFrame

，您必须让函数自己打印一个小块，并引用以知道要打印的块。例如，如果您将页面内容存储在一个数组中，那么它可能只是一个起始索引和一个长度。由于您正在打印递增的2次幂，因此只需输入最后的2次幂和每次运行函数时要打印的行数即可

您还需要一个退出条件——在

限制范围内进行检查，如果为true，则返回而不请求下一帧。我只是对
a
的值设置了一个硬上限，但您也可以检查索引是否小于数组长度（对于上面我的页面内容数组）

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

然后，当您请求下一帧时，必须再次将值绑定到
限制。如果您可以保持参数不变，那么只需执行
limits.bind（this）
。但是，如果您想更改它们，可以使用与我编写的
config
类似的方式创建另一个对象，并将其绑定

下面的代码似乎是一个基本示例，大致说明了您要查找的内容：

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));

var foo=document.getElementById（'foo'）；
var maxA=10000000000000000000000000；
函数限制（）{
对于（变量i=0；i最大值）{
返回；
}
}
requestAnimationFrame（limits.bind（this））；
}
配置={
numLines:3，
a:1
};
requestAnimationFrame（limits.bind（config））；

并在JSFIDLE中实现。我还实现了一个版本，它将每一行放在页面的顶部（而不是将其附加到底部），这样您可以更好地看到它的发生（您可以找到它）。
如果您想要性能代码，请不要设置或修改
innerHTML
，尤其是在for循环中。一次创建字符串并追加所有内容，或者更好的做法是使用
DocumentFragment
并追加该内容，这样浏览器就不必解释动态注入的HTML字符串。但是其他行何时开始打印？页面加载后、一段时间后或其他事情？您可以在循环内使用
setInterval（函数、时间）
。阅读更多的
int i
不是javascriptPatrick吗？我该怎么做？这是一次打印一行，还是只会使加载时间更长？我相信，它应该一次打印一行，并且具有让其他事件有机会被调用的优势。玩转它。是的，这是可行的，但它似乎并不影响每行打印的实际时间。它只是在执行之前暂停，然后尝试以尽可能快的速度打印所有行，也许可以更改超时的位置？嗯，您可以将超时中的“0”更改为“100”，这会减慢速度。每行之间会暂停1/10秒。我认为如果你正在寻找动画，氦的答案可能是更好的方式。这看起来很有希望，我会试试看。运气好吗？如果它不起作用，请告诉我——如果是这样的话，我可以尝试提出另一种解决方案。我很困惑，如果是函数外的，最后一个请求动画什么时候会被调用？numlines:3是一个简写的varabile声明和一个：1…将输入Idk配置部分的作用和/或含义，我只是离开了for循环，添加了请求动画和配置部分，但它并没有停止for循环，最终它仍然在中途停滞不前，我想将速度控制在一个恒定的速率，但它会逐行打印，我只需要对它进行更多的控制。如果你想控制速度（而不是像浏览器一样快），你可以替换
requestAnimationFrame（limits.bind（this））设置超时（limits.bind（this），rate）进行编码>
其中
rate
是加载下一个文本块之前的毫秒数。例如，
setTimeout（limits.bind（this），100）将每100毫秒写入下一个文本块