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

Question

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

Answer 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

}