Js/jQuery table total, how to optimize the asynchronous request frequency is too fast

Project requirements should dynamically list approvers according to the amount, and execute the asynchronous request when the amount changes. The problem now is that no matter I change the amount or the amount, I will calculate the amount and execute the asynchronous request.

clipboard.png

()

clipboard.png

is there any good optimization plan?

this is the js code:

<script>
    // 
    $(document).on("input propertychange", ".cg-items-table tbody input.listen", function (e) {
        var tr = $(this).parent().parent(),
            unitPrice = parseFloat(tr.find("td:nth-child(5) input").val()),
            quantity = parseFloat(tr.find("td:nth-child(6) input").val()),
            amount = ((unitPrice ? unitPrice : 0) * (quantity ? quantity : 1));
        tr.find("td:nth-child(8) input").val(amount.toFixed(2));
        amountCalculation();
    });
    
    // 
    function amountCalculation() {
        var totalAmount = 0;
        
        // 
        $(".cg-items-table tbody tr").each(function (index) {
            totalAmount += parseFloat($(this).find(".amount").val());
        });
        
        // 
        $(".cg-items-table tfoot tr td:last-child input").val(totalAmount.toFixed(2));
        getReviewers({
            totalAmount: totalAmount
        });
    }
</script>
May.29,2022

1. No asynchronous request is required when the total price remains unchanged
2. If the total price is changed, the previous request is meaningless and will be cancelled directly.
3. To avoid sending changes too quickly, do a delay


to search for the next function throttling.


learn about anti-jitter throttling function


request after input modification, change from monitoring input propertychange to listening blur


function anti-jitter, throttling

Menu