Question

我正在使用这两个函数，在第一个我正在更新innerhtml的值，而在第二个函数中我正在使用＆＃39; new＆＃39;修改后的值以重新计算小计。

但是，在第二个函数中使用修改后的innerhtml时，它使用的是旧值。看起来第一个函数中的innerhtml没有立即更新。我尝试使用setTimeout（）立即更新，但它没有工作。

<script type="text/javascript">
    function refreshTotal(ProductId) {
        var qty = document.getElementById("product-quantity-" + ProductId).value;
        var UnitPrice = document.getElementById("unit-price-" + ProductId).innerText;
        var total = qty * UnitPrice;
        $.get('@Url.Action("getItemPositionCart","Home")' , {id: ProductId}, function(data) //data - holds the data returned by the action
        {
            document.getElementById("product-total-" + data).innerHTML = "$" + total.toFixed(2);
            setTimeout(performExpensiveCalculationsAndRender(), 0);
        });

        $.post('@Url.Action("EditQuantity", "Home")', { id: ProductId, quantity: qty }, function (data) {

        }) 

        updateTotal.call();
    }

    function updateTotal()
    {
        var grandTotal = 0;
        var totalItems = @ViewBag.Count;

        for( var counter = 0; counter < totalItems ; counter++)
        { 
            var str = $("[id*=product-total-" + (counter+1)).html();
            var res = parseFloat(str.substring(1,str.length));
            alert(res);
            //alert($("[id*=product-total-" + (counter+1)).html());
            grandTotal = grandTotal + res;//parseFloat($("[id*=product-total-" + counter).html());
            alert(grandTotal); 
        };
        $("[id*=sub-total]").html("$" + grandTotal.toFixed(2));
    }

</script>

.innerhtml的值一旦退出第二个函数就会更新。

Answer 1

您需要在回调中而不是updateTotal函数的末尾调用refreshTotal，这会启动AJAX请求。在回调运行之前调用updateTotal意味着没有新的总计要更新，然后在不更新总计的情况下触发回调。如果在收到新数据后调用updateTotal，则会对新数据执行操作。

function refreshTotal(ProductId) {
    var qty = document.getElementById("product-quantity-" + ProductId).value;
    var UnitPrice = document.getElementById("unit-price-" + ProductId).innerText;
    var total = qty * UnitPrice;
    $.get('@Url.Action("getItemPositionCart","Home")' , {id: ProductId}, function(data) //data - holds the data returned by the action
    {
        document.getElementById("product-total-" + data).innerHTML = "$" + total.toFixed(2);
        updateTotal(); // moved from end of refreshTotal
        setTimeout(performExpensiveCalculationsAndRender(), 0);
    });

    $.post('@Url.Action("EditQuantity", "Home")', { id: ProductId, quantity: qty }, function (data) {

        updateTotal(); // may need to be included here depending on the action
    }) 

}

.innerhtml不立即更新值

1 个答案: