检测ajax何时完成

时间:2014-01-24 20:42:14

标签: ajax jquery

首先,我从json文件中获取一些邮政编码。完成加载后,我遍历邮政编码并连接到

http://api.geonames.org/postalCodeSearchJSON?postalcode="+zip+"&maxRows=1&username=demo

并使用邮政编码foreach邮政编码替换“zip”。因此,如果我有30个邮政编码,则会将此网址调用30次并获取每个邮政编码的纬度和经度并将其放入数组中。

问题是,我正在尝试使用我的数组,然后才能通过ajax调用完全构建它。我正在做的工作是做一个setTimeout()3秒钟,这样浏览器就有时间完全构建数组,然后我可以使用它。

我正在使用

$.getJSON( "zip-codes.json", function(){}).done(function(locations){
    // this .done() isnt actually working
});

以下是我的所有代码:

var marker_object = new Array;
// get location zip codes
$.getJSON( "zip-codes.json", function(){}).done(function(locations){

    // for each zip code
    $(locations.nodes).each(function(i, location_value){
        var name = location_value.node.city+', '+location_value.node.state+'\n'+location_value.node.phone;
        var zip = location_value.node.zip;
        // if zip is not empty
        if(zip != ''){

            // get lat, long for each zip
            $.getJSON( "http://api.geonames.org/postalCodeSearchJSON?postalcode="+zip+"&maxRows=1&username=midnetmedia", function(){}).done(function(long_lat){
                // loop thru each zip code, even tho we only return 1 value at a time
                $(long_lat.postalCodes).each(function(k,long_lat_value){
                    marker_object.push({latLng: [long_lat_value.lat, long_lat_value.lng], name: name});
                });
            }); // get lat, long for each zip

        } // if not empty
    }) // foreach location

}); // get zip codes

setTimeout(function(){
    console.log( marker_object );
}, 3000);

“marker_object”的最终结果在最终构建时看起来像这样

marker_object = [
    {latLng: [34.079351, -117.455114], name: 'City 1'},
    {latLng: [24.079351, -67.455114], name: 'City 2'},
    {latLng: [14.079351, -36.455114], name: 'City 3'},
    ...
]

如何判断我的$ .getJSON何时实际完成?因为.done()不适合我。我应该使用$ .AJAX()吗?

3 个答案:

答案 0 :(得分:0)

使用.ajaxComplete()事件。

$(document).ajaxComplete(function(event, xhr, settings) {
  alert("Ajax Complete")
});

根据其文档,

每当Ajax请求完成时,jQuery都会触发ajaxComplete事件。已经使用.ajaxComplete()方法注册的所有处理程序都会在此时执行。

答案 1 :(得分:0)

好的,现在我看到你的问题了。您想知道所有 30个奇怪的呼叫何时完成。这很简单,只需使用$.when.then传递.getJson来电所返回的所有承诺。

所以你可以尝试这样的事情:

var myDeferreds = [];
$(locations.nodes).each(function(i, location_value){
    var name = location_value.node.city+', '+location_value.node.state+'\n'+location_value.node.phone;
    var zip = location_value.node.zip;
    // if zip is not empty
    if(zip != ''){

        // get lat, long for each zip
        myDeferreds.push($.getJSON( "http://api.geonames.org/postalCodeSearchJSON?postalcode="+zip+"&maxRows=1&username=midnetmedia", function(long_lat){
            // loop thru each zip code, even tho we only return 1 value at a time
            $(long_lat.postalCodes).each(function(k,long_lat_value){
                marker_object.push({latLng: [long_lat_value.lat, long_lat_value.lng], name: name});
            }));
        }); // get lat, long for each zip

    } // if not empty
}) // foreach location

$.when(myDeferreds).then(function() {
    console.log("All my ajax calls are complete!!!");
});

答案 2 :(得分:0)

由于您正在尝试查看所有ajax调用何时完成(不仅仅是在完成其中一个调用时),您可以将已完成的数量与您拥有的请求总数以及这些数量的计数进行比较是相同的,然后你会知道你的阵列已满,然后你可以使用它。你可以这样做:

var marker_object = [];
// get location zip codes
$.getJSON( "http://localhost/hiab/zip-codes.json").done(function(locations){

    // for each zip code
    var nodes = $(locations.nodes);
    var cnt = 0;
    nodes.each(function(i, location_value){
        var name = location_value.node.city+', '+location_value.node.state+'\n'+location_value.node.phone;
        var zip = location_value.node.zip;
        // if zip is not empty
        if(zip != ''){

            // get lat, long for each zip
            $.getJSON( "http://api.geonames.org/postalCodeSearchJSON?postalcode="+zip+"&maxRows=1&username=midnetmedia").done(function(long_lat){
                // loop thru each zip code, even tho we only return 1 value at a time
                $(long_lat.postalCodes).each(function(k,long_lat_value){
                    marker_object.push({latLng: [long_lat_value.lat, long_lat_value.lng], name: name});
                });
                // see if all marker nodes are now in the array
                if (++cnt === nodes.length) {
                    // process marker_object array now
                }
            }); // get lat, long for each zip

        } // if not empty
    }) // foreach location

}); // get zip codes

此外,当您使用.done()时,无需传递空成功函数。你可以放弃那个参数,ajax函数会看到参数不存在。