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()例如缓存），但最大的问题是，如果您有 50*N 条记录（例如 4000...），您要求浏览器每 1 毫秒运行一次函数。

只需一次清洁即可。

例如 ：

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);

当然你也可以绑定到一个按钮：

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