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() {&nbsp; &nbsp; // .....&nbsp; &nbsp; let number_of_rows = 10000&nbsp; &nbsp; for (i = 50; i < number_of_rows; i += 50) {&nbsp; &nbsp; &nbsp; &nbsp; await b(i)&nbsp; &nbsp; }&nbsp; &nbsp; // .....}function b(start_row) {&nbsp; &nbsp; //create rows dynamically and append to the html table&nbsp; &nbsp; return new Promise(res => setTimeout(res, 50)); // wait 50ms&nbsp; &nbsp; // adjust this number as desired}