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

我有一个for循环，它在javascript代码中迭代了10000多次。for循环创建

标记并将其添加到当前页面DOM中的一个框中

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

因为加载所有10000个

标记需要花费太多时间。我想以50个

标记的块更新框

提前感谢。

您可以使用该函数延迟某些代码的执行：

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

---

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

在这些情况下有一个简便的技巧：使用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
    }
}

---

for（i=0；i我将创建
div
s的代码分解成一个函数，然后通过
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
来完成工作。一旦完成工作，该闭包就有资格进行垃圾收集。（更多信息：）

因为回流需要很多时间。您应该创建一个文档片段，然后添加BRAT



睡眠不能解决你的问题

另一方面，您创建了一个包含innerhtml和add to 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);

}

var frag=document.createDocumentFragment（）；
函数加法器（）{
变量e；
对于（i=0；i，这里是在不挂起浏览器的情况下延迟javascript的真正诀窍。
您需要使用一个带有同步方法的ajax函数，该方法将调用一个php页面，在该php页面中，您可以使用sleep（）php函数！
这样行，但有两条注释：1.每次达到50个div时都会不必要地创建一个新函数。这是199个不必要的函数。也许可以，但仍然可以避免。2.在字符串数组中构建HTML，然后使用
a.join（“”）更有效
完成后创建一个大字符串，而不是使用字符串连接来构建HTML。@T.J.这两点你都是对的，但为了简单起见，我没有费心：1.函数创建很少会出现性能问题，特别是当您的瓶颈是DOM时；2.字符串连接只是IE和oft上的一个问题在其他浏览器中，en的速度更快，但即使对于IE，因为我正在将
tmpContainer
重置为空字符串，所以字符串永远不会变大；）@框9：刚刚看到它：
文档。写
？！？！这根本不起作用。
appendChild
，等等，很好。@T.J.它会起作用，但它只会覆盖你拥有的页面，所以可能无法按预期工作；）我希望很清楚，它只是表示变量
html
的使用，而不是
tmpContainer
@Box9：“工作”的有趣解释；-）我会删除它，因为它完全误导了人，只需添加一条注释“使用
html
在这里创建元素”.顺便说一句，我以前是错的，它有398个完全不必要的函数（你正在重新创建创建闭包的东西，它比其他的更不需要）。此外，除非发生
data.length%50==0
，否则这将无法输出最后的1-49，或者至少需要重复的代码才能输出。相反：这只是为了给出一个好的答案，而不是给你一个困难的时间。@fehergeri:我的问题？哈？@fehergeri:哦，我明白了，你是指他的问题。我正在处理的问题是不做临时的更新；回流完全是另一回事。注意是沮丧的，所以答案应该是寻找一个解决方案的终点（而不是另一个停留的引用，它会随着时间的推移而变得陈旧）。请考虑在这里添加一个独立的概要，保持链接作为参考。
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);

}