时间戳

首页 > 解决方案 > Javascript一次打印输出一个而不是一次打印整个页面？

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

        }
    }
}

现在，我如何能够更好地控制它到哪里，无论加载打印需要多长时间，甚至放慢它都可以。

标签： javascriptperformance

解决方案

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

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

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

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

然后，当您请求下一帧时，您必须limits再次绑定这些值。如果您可以保持论点不变，您可以这样做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));

并在 JSFiddle here中实现。我还实现了一个版本，它将每一行放在页面顶部（而不是将其附加到底部），以便您可以更好地看到它的发生（您可以在此处找到）。

推荐阅读