несколько вызовов ajax в то же время переопределяют друг друга

Question

У меня есть страница с несколькими различными формами, по которым люди могут вставлять свой почтовый индекс и номер номера. После onblur в этом поле ввода я делаю ajax-вызов, чтобы получить имя улицы и город с сервера на основе zipcode и housenumber.

function getAddress(postcode, streetnum, form, tr) { 
    $.ajax({ 
     type: "GET", 
     url: "some url with streetnumber and zipcode", 
     dataType: "json", 
     success: function(data){ 
      var street = $("input.formstreet", tr); 
      var city = $("input.formcity", tr); 
      street.val(data.data[0].streetname); 
      city.val(data.data[0].city); 
      tr.css("visibility","visible"); 
      switch(tr.get(0).nodeName.toLowerCase()){ 
       case "tr": 
        tr.css('display','table-row'); 
        break; 
       case "tbody": 
        tr.css('display','table-row-group'); 
        break; 
       default: 
        tr.css('display','block'); 
      }; 
     } 
    }); 
} 

Это работает, как должно, однако, если страница получает перезагружается и поле уже заполнены адрес должен перезагружаются с сервера.

$("#thing").keyup(function(){ 
    completeAddress1(); 
}); 
completeAddress1(); 

$("#something").keyup(function(){ 
    completeAddress2(); 
}); 
completeAddress2(); 

$("#something else").keyup(function(){ 
    completeAddress3(); 
}); 
completeAddress3(); 

$("#some other thing").keyup(function(){ 
    completeAddress4(); 
}); 
completeAddress4(); 

В completeAddress() функции просто проверить, требуется ли вызов Ajax, если так называет GetAddress.

Итак ... к реальной проблеме ... В pageload выполняется несколько вызовов ajax, и только последний вызвал возврат (я проверил с помощью скрипача), теперь я понимаю, почему возвращается только один, но что я могу сделать об этом ...

Answer 1

Fixed его, проверяя, есть ли уже xhr работает, если это так, добавить функцию обратного вызова в массив. Когда первый xhr сделан, он проверяет массив, чтобы увидеть, есть ли какие-либо функции и пытается выполнить первый, каждая функция делает это рекурсивно, пока массив не будет пуст.

в основном что-то вроде этого:

var arr = [], 
    xhr; 

function applyXhr(func){ 
    if(xhr){ 
     func() 
    }else{ 
     arr.push(func); 
    } 
} 

applyXhr(function(){ 
    xhr = $.ajax({ 
     //stuff, 
     complete:function(){ 
      //other stuff 

      if(arr.lenght){ 
       arr.shift()(); 
      } 
     } 
    }); 
}) 

Answer 2

Turn Off Form Autocompletion

<form name="form1" id="form1" method="post" autocomplete="off" 
    action="http://www.example.com/form.cgi"> 
[...] 
</form>