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
}