Question

我有一个for循环，它在javascript代码中迭代超过10,000次。 for循环创建并添加＆lt; div>标记到当前页面DOM中的框中。

for(i = 0; i < data.length; i++)
{
    tmpContainer += '<div> '+data[i]+' </div>';
    if(i % 50 == 0) { /* some delay function */ }
}
containerObj.innerHTML = tmpContainer;

我想在每50英寸后延迟一次。 div>标签那么

处的代码是什么

/* some delay function */

因为它花费了太多时间来加载所有10,000＆lt; div>标签。我想以50＆lt;块的形式更新盒子。 div>标签

提前感谢。

Answer 1

在这些情况下有一个方便的技巧：使用0毫秒的setTimeout。这将导致您的JavaScript屈服于浏览器（因此它可以执行渲染，响应用户输入等），但不会强迫它等待一段时间：

for (i=0;i<data.length;i++) {
    tmpContainer += '<div> '+data[i]+' </div>';
    if (i % 50 == 0 || i == data.length - 1) {
        (function (html) { // Create closure to preserve value of tmpContainer
            setTimeout(function () {
                // Add to document using html, rather than tmpContainer

            }, 0); // 0 milliseconds
        })(tmpContainer);

        tmpContainer = ""; // "flush" the buffer
    }
}

注意：T.J。 Crowder正确地提到下面的代码将在循环的每次迭代中创建不必要的函数（一个用于设置闭包，另一个用作setTimeout的参数）。这不太可能成为问题，但如果您愿意，可以查看his alternative，它只创建一次闭包函数。

警告：尽管上面的代码将提供更愉快的渲染体验，但不建议在页面上使用10000个标记。在此之后，每个其他DOM操作都会变慢，因为要遍历更多元素，并且对布局的任何更改都要进行更昂贵的回流计算。

Answer 2

您可以使用window.setTimeout函数来延迟执行某些代码：

if(i % 50 == 0) {
    window.setTimeout(function() {
        // this will execute 1 second later
    }, 1000);
}

但是你的javascript将继续执行。它不会停止。

Answer 3

我将创建div的代码分解为函数，然后通过setTimeout定期执行该函数，如下所示：

function createThousands(data) {
    var index;

    index = 0;
    doAChunk();

    function doAChunk() {
        var counter;

        for (counter = 50; counter > 0; --counter) {
            // Are we done?
            if (index >= data.length) {
                // Yup
                return;
            }

            // ...create a div...

            // Move to the next
            ++index;
        }

        // Schedule the next pass
        setTimeout(doAChunk, 0); // 0 = defer to the browser but come back ASAP
    }
}

这使用单个闭包doAChunk来完成工作。一旦完成工作，该关闭就有资格进行垃圾收集。（更多：Closures are not complicated）

Live example

Answer 4

因为回流需要很长时间。你应该创建一个文档片段，然后添加小子。

When does reflow happen in a DOM environment?

Javascript Performance - Dom Reflow - Google Article

睡觉无法解决您的问题

另一方面，您创建一个包含innerhtml和添加到innerhtml的字符串。字符串的东西真的不需要很大的性能，但是当你执行.innerhtml命令时，它会启动一个进程，它解析你的字符串并创建元素并附加它们。你不能打断或增加延迟。

innerhtml过程不能被打断或中断。

你需要逐个生成元素，并在添加50个元素之后，创建一个settimeout延迟。

var frag = document.createDocumentFragment();

function addelements() {

   var e;
   for(i=0;i<50;++i) {
       e = document.createElement('div');
       frag.appendChild(e);
   }
   dest.appendChild(frag);
   window.setTimeout(addelements,1000);

}

Answer 5

这是在不挂起浏览器的情况下延迟javascript的真正技巧。你需要使用ajax函数和同步方法，它将调用一个php页面，在那个php页面你可以使用sleep（）php函数！ http://www.hklabs.org/articles/put-delay-in-javascript

Javascript：如何在执行javascript代码之间放一个简单的延迟？

5 个答案: