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

【问题标题】：Delay in display for dynamically created rows for table in HTML在 HTML 中为表格动态创建的行显示延迟
【发布时间】：2020-12-22 17:51:50
【问题描述】：

我正在尝试使用 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
}

【问题讨论】：

标签： javascript html-table

【解决方案1】：

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
}

【讨论】：