时间戳

首页 > 解决方案 > 为什么 Firefox 和其他浏览器在我尝试初始化多个组件时冻结，但在 Chrome 上却没有？

javascript - 为什么 Firefox 和其他浏览器在我尝试初始化多个组件时冻结，但在 Chrome 上却没有？

问题描述

在 Firefox（67.0 版）上，我有一个网格表来显示数据。我使用 forEach() 从 JSON 数据为网格表创建列和行。它大约有 100 行，10 列。在创建行列迭代期间，浏览器冻结，我无法在网页上执行任何操作。迭代之后，一切恢复正常。

我尝试在不同的浏览器上做同样的事情：IE、Edge、Chrome（最新版本）。IE 上存在冻结问题，Edge 上 Chrome 除外。在 Chrome 的迭代过程中，我可以在网页上执行其他任务，例如单击按钮、悬停在列上等。

为什么它不会发生在 Chrome 上？是因为 Chrome 使用了不同的引擎吗？我该如何克服这个问题？

function initGridComponents() {
  let records = data.items;
  records.forEach((record) => {
    createColumnsType1(record);
    createColumnsType2(record);
    createColumnsType3(record);
  });
}

我希望它可以在冻结的浏览器中正常工作。

标签： javascripttypescriptloopsgoogle-chromefirefox

解决方案

您可以利用事件队列来分隔操作，从而使您的页面在加载时更具响应性：

function initGridComponents() {
  let records = data.items;
  records.forEach((record) => {

    setTimeout(createColumnsType1, 0, record);
//             ^^^^^^^^^^^^^^^^^^     ^^^^^^
//               function handle     parameter
    setTimeout(createColumnsType2, 0, record);
    setTimeout(createColumnsType3, 0, record);
  });
}

推荐阅读