2016-02-21 2 views
1

Я пытаюсь вызвать несколько функций на событии 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> 
+0

Почему вы не определить все ваши функции (как 'вар getValues2 = функция (сделано) { ...} '), затем создайте главную функцию, которая вызывает все ваши функции в заказать с использованием входных данных при успешном получении первого обратного вызова? Таким образом, вы можете гарантировать, что все ваши функции будут вызваны в желаемом порядке. – duhaime

+1

Цепочки - вызовите соответствующую (следующую) функцию из 'onSuccess' предыдущего. – ethrbunny

+0

getPrice и getTax ** являются асинхронными ** ... поэтому вам нужно дождаться, когда те, кому звонят ajax, завершатся, прежде чем вы получите значение цены и налога –

ответ

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> 
Смежные вопросы