时间戳

首页 > 解决方案 > 在 HTML 中为表动态创建的行显示延迟

javascript - 在 HTML 中为表动态创建的行显示延迟

问题描述

我正在尝试使用 For 循环以 50 的增量填充 HTML 表的行。For 循环按预期工作，但在循环终止之前，表格中的任何行都不会显示。

function a() {
    // .....
    let number_of_rows = 10000
    for (i = 50; i < number_of_rows; i += 50) {
        b(i)
    }
    // .....
}

function b(start_row) {
    //create rows dynamically and append to the html table
}

标签： javascripthtml-table

解决方案

JavaScript默认是阻塞的。浏览器只会在 JavaScript 完成运行到当前运行的同步代码结束时重新绘制。因此，如果您的同步代码总共插入 10000 行，那么这些行将在一切完成后立即出现。

如果您想一次渲染 50 个批次，请在以下调用之间添加一个小的延迟b：

async function a() {
    // .....
    let number_of_rows = 10000
    for (i = 50; i < number_of_rows; i += 50) {
        await b(i)
    }
    // .....
}

function b(start_row) {
    //create rows dynamically and append to the html table
    return new Promise(res => setTimeout(res, 50)); // wait 50ms
    // adjust this number as desired
}

推荐阅读