javascript - 多个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()();
            }
        }
    });
})