javascript - 如何加快jquery中行的计算

Question

我正在使用简单的 Html 表来显示数据。当表中有多达 100 行时，一切都很顺利，但是当行数从 100 行增加时，计算会花费太多时间
这是我的 jquery 代码

    $('body').on('keyup', 'input[class*="quantity"],input[class*="unit-price"],input[class*="gst-tax-value"],input[class*="new-price-value"]', function () {
//        alert("Called");
        var tr = $(this).parents('tr');
//        var ths = $(this);
        /////////variables for classes///////
        var input_quantity_class = '.quantity';
        var text_gst_amount_class = '.gst-amount';
        var input_gst_tax_value_class = '.gst-tax-value';
        var input_gst_tax_amount_class = '.gst-tax-amount-value';
        var input_unitprice_class = '.unit-price';
        var input_unitprice_tax_class = '.new-price-value';
        var text_totalprice_without_gst_class = '.total-price-without-gst';
        var input_totalprice_without_gst_class = '.total-price-without-gst-value';
        var text_totalprice_class = '.total-price';
        var input_totalprice_class = '.total-price-value';

        var is_usd = $('input[class*="rdo-currency-clx"]:checked').val();
        ////////defining variables////////
        var quantity = 0;
        var unit_price = 0;
        var gst_percentage = 0;
        var gst_amount = 0;
        var total_gst_amount = 0;
        var price_without_gst = 0;///////unitprice with/without gst/////
        var total_with_gst = 0; //unitprice + gst_amount * quantity///
        var total_wod_gst = 0; //unitprice * quantity/
        var total_price = 0; //unitprice * quantity//
        var unitprice_withgst = 0;
        //////////getting values//////////
        quantity = (tr.find(input_quantity_class).val() != undefined || tr.find(input_quantity_class).val() != "") ? parseFloat(tr.find(input_quantity_class).val()) : 0;
        unit_price = (tr.find(input_unitprice_class).val() != undefined || tr.find(input_unitprice_class).val() != "") ? parseFloat(tr.find(input_unitprice_class).val()) : 0;
        gst_percentage = (tr.find(input_gst_tax_value_class).val() != undefined || tr.find(input_gst_tax_value_class).val() != "") ? parseFloat(tr.find(input_gst_tax_value_class).val()) : 0;
        gst_amount = unit_price * gst_percentage / 100;
        total_gst_amount = gst_amount * quantity;
        total_price = unit_price * quantity;
        total_with_gst = total_price + total_gst_amount;
        total_wod_gst = total_price;
        unitprice_withgst = unit_price + gst_amount;
        ////////amount figur masking///////////
        gst_amount = (is_usd == 1) ? Math.round(gst_amount) : gst_amount.toFixed(2);
        total_gst_amount = (is_usd == 1) ? Math.round(total_gst_amount) : total_gst_amount.toFixed(2);
//        total_price = (is_usd == 1)?Math.round(total_price):accounting.formatMoney(total_price.toFixed(2), "", 2, ",", ".");
        total_with_gst = (is_usd == 1) ? Math.round(total_with_gst) : total_with_gst.toFixed(2);
        total_wod_gst = (is_usd == 1) ? Math.round(total_wod_gst) : total_wod_gst.toFixed(2);
        unitprice_withgst = (is_usd == 1) ? Math.round(unitprice_withgst) : unitprice_withgst.toFixed(2);
        if (!isNaN(unit_price) && unit_price != undefined && unit_price != "") {
            tr.find(text_gst_amount_class).html(accounting.formatMoney(total_gst_amount, "", 2, ",", "."));
            tr.find(input_gst_tax_amount_class).val(total_gst_amount);
            tr.find(text_totalprice_without_gst_class).html(accounting.formatMoney(total_wod_gst, "", 2, ",", "."));
            tr.find(input_totalprice_without_gst_class).val(total_wod_gst);
            tr.find(text_totalprice_class).html(accounting.formatMoney(total_with_gst, "", 2, ",", "."));
            tr.find(input_totalprice_class).val(total_with_gst);
            getFooterTotal();
            getGrandTotal();
        }
    });

//calculations of footer total of table
    function getFooterTotal() {
        var is_usd = $('input[class*="rdo-currency-clx"]:checked').val();
        var rows = $('tbody.databody tr');
        var gst_footer_total = 0;
        var price_footer_total = 0;
        var totalprice_withgst_footer_total = 0;
        var totalprice_wotgst_footer_total = 0;
        $(rows).each(function (i, val) {
            tr = $(this);
            is_checked = tr.find('input.item-value').val();
            if (is_checked == 1) {
                gst_footer_total += (isNaN(tr.find('input.gst-tax-amount-value').val()) || tr.find('input.gst-tax-amount-value').val() == undefined || tr.find('input.gst-tax-amount-value').val() == "") ? 0 : parseFloat(tr.find('input.gst-tax-amount-value').val());
                price_footer_total += (isNaN(tr.find('input.new-price-value').val()) || tr.find('input.new-price-value').val() == undefined || tr.find('input.new-price-value').val() == "") ? 0 : parseFloat(tr.find('input.new-price-value').val());
                totalprice_wotgst_footer_total += (isNaN(tr.find('input.total-price-without-gst-value').val()) || tr.find('input.total-price-without-gst-value').val() == undefined || tr.find('input.total-price-without-gst-value').val() == "") ? 0 : parseFloat(tr.find('input.total-price-without-gst-value').val());
                totalprice_withgst_footer_total += (isNaN(tr.find('input.total-price-value').val()) || tr.find('input.total-price-value').val() == undefined || tr.find('input.total-price-value').val() == "") ? 0 : parseFloat(tr.find('input.total-price-value').val());
            }
        });
        gst_footer_total = (is_usd == 1) ? Math.round(gst_footer_total) : gst_footer_total.toFixed(2);
        price_footer_total = (is_usd == 1) ? Math.round(price_footer_total) : price_footer_total.toFixed(2);
        totalprice_wotgst_footer_total = (is_usd == 1) ? Math.round(totalprice_wotgst_footer_total) : totalprice_wotgst_footer_total.toFixed(2);
        totalprice_withgst_footer_total = (is_usd == 1) ? Math.round(totalprice_withgst_footer_total) : totalprice_withgst_footer_total.toFixed(2);
        $('body').find('td#td-gst-amount').html(accounting.formatMoney(gst_footer_total, "", 2, ",", "."));
        $('body').find('td#td-unit-gst').html(accounting.formatMoney(price_footer_total, "", 2, ",", "."));
        $('body').find('#span-total-wot-gst').html(accounting.formatMoney(totalprice_wotgst_footer_total, "", 2, ",", "."));
        $('body').find('input.total_wot_gst').val(totalprice_wotgst_footer_total);
        $('body').find('#span-total-with-gst').html(accounting.formatMoney(totalprice_withgst_footer_total, "", 2, ",", "."));
        $('body').find('input.total_with_gst').val(totalprice_withgst_footer_total);
    }
///////calculation of grand total//////////////
    function getGrandTotal() {
        var is_gst = $('input.gst_val_clx').val();
        var is_usd = $('input[class*="rdo-currency-clx"]:checked').val();
        var amount_with_gst = parseFloat($('input.total_with_gst').val());
//        alert(amount_with_gst);return;
        var amount_without_gst = parseFloat($('input.total_wot_gst').val());
        var freight_amount = parseFloat($('input.freight_amount').val());
        var discount_amount = parseFloat($('input.discount_amount').val());
        var freight_operation = $('input[class*="charges_operation"]:checked').val();
        var discount_operation = $('input[class*="discount_operation"]:checked').val();
//        alert(discount_operation);
        var grand_total = (is_gst == 1) ? amount_with_gst : amount_without_gst;
//        console.log(is_gst+" Freight Operation  "+freight_operation +" Discount Operation "+discount_operation+" Total "+amount_with_gst);return;
        if (isNaN(amount_with_gst) || amount_with_gst == undefined || amount_with_gst == "")
            amount_with_gst = 0;
        if (isNaN(amount_without_gst) || amount_without_gst == undefined || amount_without_gst == "")
            amount_without_gst = 0;
        if (isNaN(discount_amount) || discount_amount == undefined || discount_amount == "")
            discount_amount = 0;
        if (isNaN(freight_amount) || freight_amount == undefined || freight_amount == "")
            freight_amount = 0;
        if (is_gst == 1) {
            if (freight_operation == 1)
                grand_total += freight_amount;
            else
                grand_total -= freight_amount;

            if (discount_operation == 1)
                grand_total += discount_amount;
            else
                grand_total -= discount_amount;
        } else {
            if (freight_operation == 1)
                grand_total += freight_amount;
            else
                grand_total -= freight_amount;

            if (discount_operation == 1)
                grand_total += discount_amount;
            else
                grand_total -= discount_amount;
        }
        grand_total = (is_usd == 1) ? Math.round(grand_total) : grand_total.toFixed(2);
        $('td span.total-amount').html(accounting.formatMoney(grand_total, "", 2, ",", "."));
        $('input.total-amount-value').val(grand_total);
    }

能否请您建议我如何提高 jquery 中计算数据运行时间的速度谢谢
这是我的 Html 表格图片:
我正在计算每一行以及总计

Answer 1

我觉得你的代码还不错。

我看到的一个改进是您可以避免对 find() 的一些不必要的调用，因为它是一个“昂贵的”jQuery() 操作。

示例:

quantity = (tr.find(input_quantity_class).val() != undefined || tr.find(input_quantity_class).val() != "") ? parseFloat(tr.find(input_quantity_class).val()) : 0;

tr.find(input_quantity_class) 被调用 2 次(一次用于 undefined 检查，一次用于 if or else)

通过“缓存”find() 的结果来避免这些多次 find() 调用:

quantityVal = tr.find(input_quantity_class).val();
quantity = (quantityVal != undefined || quantityVal != "") ? parseFloat(quantityVal) : 0;

如果你在任何地方都喜欢这样做，它应该会提升你的脚本。性能示例可以在 this answer 中找到.也看看 Optimize Selectors确保尽可能使用最快的选择器。