Question

我尝试在onChange事件上调用多个函数（请参阅index.php）。功能正常，但它们确实很慢。函数的顺序应为：getPrice，getTax，getValues，getValues2。

当维护该序列时，脚本将正常工作。

getPrice      = 10.00
getTax        = 5.00   
              __________+
getValues     = 15.00 (total price)

功能的顺序现在是getValues，getValues2，getPrice，getTax。但这不是正确的顺序。现在我明白了：

getPrice      = 10.00
getTax        = 5.00   
              __________+
getValues     = 0.00 (total price)

我需要第二次执行更改getPrice和getTax，以便getValues进行正确的计算。

我的问题是。有没有办法来解决这个问题？如何以有效和正确的方式运行此脚本？

我使用以下代码：

的index.php

<html>
<label>Quantity</label><br />
<input type="text" class="form-control" name="quantity1" id="quantity1" onChange='getPrice(this.value);getTax(this.value);getValues();getValues2()' placeholder="Quantity">
</html>

功能：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function getPrice() {

    // getting the selected id in combo
    var selectedItem = jQuery('#product1 option:selected').val();

    // Do an Ajax request to retrieve the product price
jQuery.ajax({
    url: 'get.php',
    method: 'POST',
    data: {'product1': selectedItem, 'quantity1' : jQuery('#quantity1').val()}, 
    success: function(response){
        // and put the price in text field
        jQuery('#price1').val(response);
    },
    error: function (request, status, error) {
        alert(request.responseText);
    },
}); 
}
</script>

<script>
function getTax() {

    // getting the selected id in combo
    var selectedItem = jQuery('#product1 option:selected').val();

    // Do an Ajax request to retrieve the product price
jQuery.ajax({
    url: 'get11.php',
    method: 'POST',
    data: {'product1': selectedItem, }, 
    success: function(response){
        // and put the price in text field
        jQuery('#tax1').val(response);
    },
    error: function (request, status, error) {
        alert(request.responseText);
    },
}); 
}
</script>

<script>
function getValues(){
    var numVal1 = Number(document.getElementById("price1").value);
    var numVal2 = Number(document.getElementById("price2").value);
    var numVal3 = Number(document.getElementById("price3").value);
    var numVal5 = Number(document.getElementById("price4").value);

    var totalValue = numVal1 + numVal2+numVal3+numVal5;
    document.getElementById("total").value = totalValue;
}
</script>

<script>
function getValues2(){
    var numVal1 = Number(document.getElementById("tax1").value);
    var numVal2 = Number(document.getElementById("price1").value);

    var totalValue = numVal1 + numVal2;
    document.getElementById("lastprice").value = totalValue;
}
</script>

Answer 1

首先，这是一种软件架构问题。为什么要对每个动作使用特殊请求？

有几个更好的解决方案： 1.创建一个主控制器，根据请求的参数获取和计算数据 2.在显示视图时获取数据，然后使用React在前端计算它们（https://facebook.github.io/react/） 3.正如Jaromanda所说，您可以将请求链接起来 - 每个请求都在先前请求的完成功能（https://laracasts.com/series/design-patterns-in-php/episodes/1）

<script>
function getPrice() {

    // getting the selected id in combo
    var selectedItem = jQuery('#product1 option:selected').val();

    // Do an Ajax request to retrieve the product price
    jQuery.ajax({
        url: 'get.php',
        method: 'POST',
        data: {'product1': selectedItem, 'quantity1' : jQuery('#quantity1').val()}, 
        success: function(response)
        {
            // and put the price in text field
            jQuery('#price1').val(response);

            getTax();
        },
        error: function (request, status, error) {
            alert(request.responseText);
        },
    }); 
}
</script>

<script>
function getTax() {

    // getting the selected id in combo
    var selectedItem = jQuery('#product1 option:selected').val();

    // Do an Ajax request to retrieve the product price
    jQuery.ajax({
        url: 'get11.php',
        method: 'POST',
        data: {'product1': selectedItem, }, 
        success: function(response){
            // and put the price in text field
            jQuery('#tax1').val(response);

                var numVal1 = Number(document.getElementById("price1").value);
                var numVal2 = Number(document.getElementById("price2").value);
                var numVal3 = Number(document.getElementById("price3").value);
                var numVal5 = Number(document.getElementById("price4").value);

                var totalValue = numVal1 + numVal2+numVal3+numVal5;
                document.getElementById("total").value = totalValue;

                var numVal1 = Number(document.getElementById("tax1").value);
                var numVal2 = Number(document.getElementById("price1").value);

                var totalValue = numVal1 + numVal2;
                document.getElementById("lastprice").value = totalValue;
        },
        error: function (request, status, error) {
            alert(request.responseText);
        },
    }); 
}
</script>

正确的函数序列

1 个答案: