javascript - 如何提高性能..？

Question

function removeTds() {
    var elements = $('#goldBarList tr:not(:eq(0))').filter(':has(:checkbox:checked):lt(50)');
    var count = elements.length;
    elements.each(function() {
        grossWeightTotal = grossWeightTotal - $('#goldBarList tr:eq(' + $(this).index() + ') td:eq(8)').text();
        netWeightTotal = netWeightTotal - $('#goldBarList tr:eq(' + $(this).index() + ') td:eq(9)').text();
        fineOunceTotal = fineOunceTotal - $('#goldBarList tr:eq(' + $(this).index() + ') td:eq(10)').text();
    });
    elements.remove();
    if(count === 50) window.setTimeout(removeTds, 1);
}
removeTds();

以上代码导致“停止运行此脚本？”迅速的。我有 4000 条记录。

Answer 1

您的代码本质上是缓慢且可优化的(例如缓存 $(this).index())但最大的问题是您要求浏览器每 1 毫秒运行一次该函数，如果您有50*N 条记录(例如 4000...)。

只需一次清洁。

例如:

function removeTds() {
    var elements = $('#goldBarList tr:not(:eq(0))').filter(':has(:checkbox:checked)');
    elements.each(function() {
        var index = $(this).index();
        grossWeightTotal = grossWeightTotal - $('#goldBarList tr:eq(' + index + ') td:eq(8)').text();
        netWeightTotal = netWeightTotal - $('#goldBarList tr:eq(' + index + ') td:eq(9)').text();
        fineOunceTotal = fineOunceTotal - $('#goldBarList tr:eq(' + index + ') td:eq(10)').text();
    });
    elements.remove();
}
removeTds();

如果您希望在更改复选框时重新进行清洁，请添加:

$('input[type="checkbox"]').change(removeTds);

当然你也可以绑定(bind)一个按钮:

$('#removeButton').change(removeTds);