jQuery - 在 AJAX 调用后将 10k 行附加到表中

Question

我有一个网页将接收 10k 行 CSV 数据，在成功调用 ajax 后我必须调用 API 以获取更多详细信息我必须附加所有这些 10k 行（5 列 - 4 个带有 jQuery 验证规则的输入字段） .成功添加 10K 行后，其验证规则网页变得有点慢，每次单击按钮都需要 10-15 秒才能反映出来，我能做些什么来避免这种情况或减少时间吗？

我做过的事情：

• 用基本的 for 循环替换所有的 forEach、each 循环。
• 通过隐藏输入字段减少验证开销。
• 在 100 行之间使用 setTimeOut 以避免浏览器耗尽资源（并尝试通过以 1 秒的间隔追加 100 行来模仿无限滚动）。

let targetProducts = new Set();
let htmlToAppend = '', itemIndex = 0; 
let itemCodesToValidate = new Map(), itemTotalLength = responseData.body.length; 

let appendToTable = () => {
    for (; itemIndex < itemTotalLength; itemIndex++) {
        let item = responseData.body[itemIndex];
    
        if (!(targetProducts.has(item['item_code']))) {
            htmlToAppend += addTargetProductRow(
                item['item_code'],
                item['item_name'],
                item['price'],
                bulkUpdateValues[item['item_code']]?.itemDispPrirSeq ?? '',
                bulkUpdateValues[item['item_code']]?.discountRate ?? '',
                bulkUpdateValues[item['item_code']]?.discountPrice ?? '',
                bulkUpdateValues[item['item_code']]?.price ?? ''
            );
        }

        itemCodesToValidate.set(item['item_code'], 1);
        itemCodes.set(item['item_code'], 1);

        if (itemIndex + 1 < itemTotalLength && itemIndex % 100 == 0) {
            setTimeout(appendToTable, 1000);
            itemIndex++;
            break;
        }
    }

    if (htmlToAppend != '') {
        $('#sale_table tbody').append(htmlToAppend);
        addTargetProductValidationRules(itemCodesToValidate);

        htmlToAppend = '';
        itemCodesToValidate.clear();
    }

    if ($('#table_to_append tbody tr').length) {
        $('#bulk_update_button').prop('disabled', false);
    }
};

appendToTable();

Nb：无法进行分页（我知道这很愚蠢，但这是必需的）。