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

Question

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

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.

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

Answer 1

Исправлено, проверяя, запущен ли уже 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

Отключить автозаполнение форм

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