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

Question

我有一个for循环,在javascript代码中迭代超过10,000次.for循环创建并将<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个<div>标签.我想以50 <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
    }
}

注意:TJ Crowder在下面正确地提到上面的代码将在循环的每次迭代中创建不必要的函数(一个用于设置闭包,另一个用作参数setTimeout).这不太可能是一个问题,但如果你愿意,你可以查看他的替代方案,它只创建一次闭包函数.

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