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

Question

我有一个 for 循环，它在 javascript 代码中迭代超过 10,000 次。 for 循环创建

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

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

我想在每 50 个

标签后放置一个延迟，所以

位置的代码是什么

/* some delay function */

因为加载所有 10,000 个

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

标签为单位更新框。

提前致谢。

最佳答案

在这些情况下有一个方便的技巧:使用 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 操作都会变慢，因为要遍历的元素更多，并且对布局的任何更改进行更昂贵的回流计算。

关于Javascript:如何在执行 javascript 代码之间设置一个简单的延迟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4912655/

上一篇：javascript - Google map v3 折线工具提示

下一篇：javascript - 如何找到文字数组的长度？

相关文章：

javascript - 导入语句和 Babel

javascript - 从 JSON 对象/字符串或 Java 脚本变量中删除开始和结束处的双引号？

jquery - Jquery 的 Bayaux 协议(protocol)实现

jquery - 将原型(prototype)与 Jquery 一起使用

javascript - 为什么这个混淆代码在 JavaScript 中是恶意的？

javascript - 让 kineticjs 使用现有的 Canvas

jquery - 新手 : How to clean up an object in javascript?

javascript - Meteor.users.update() 不适用于注销+登录

javascript - 三元内部输入 react

javascript - Validate.js promise 自定义验证

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 操作都会变慢，因为要遍历的元素更多，并且对布局的任何更改进行更昂贵的回流计算。