for循环中使用ajax

问题:

在写定位的时候遇到了个问题,根据经纬度,反解析出此经纬度对应的位置信息,有n个经纬度,用的是百度的解析api百度api
(因为一开始我用腾讯的定位的api,所以知道了经纬度,然后又搜索到了百度解析的api,就出现了这个问题,饿,为啥不直接用百度api呢,这样不就啥事没有,emmmmm….,陷入沉思)

根据逻辑写:

    var html=""
    var pos=""
    function refresh()   
    {   
        html="";
        $("#list").html(html)
        getPos() //获取经纬度
        for(var i=0;i<pos.length;i++){
            var time = pos[index].time;
            var posData = pos[index].data;
            var d = eval('('+posData+')');
            html+="<div>"+time+"</div>"
                +"<div>腾讯地图:"+d.nation+" "
                +d.province+" "+d.city+" "+d.district
                +" "+d.addr+"</div>"
            //经纬度信息
            var loc = d.lat+","+d.lng;

            console.log(1);

        var url="http://api.map.baidu.com/geocoder/v2/callback=renderReverse&location="+loc+"&output=json&pois=1&ak=eoxspRnxjZ9hTsRorgM63SpcM5GSEYKI";

             $.ajax({
                async:false,
                cache:false,
                type: "GET",
                dataType: "jsonp",
                url: url,
                success: function (json) {
                    //由百度api解析完毕,传入数据
                     console.log(2)

                     if(json.status==0){
                          country = json.result.addressComponent.country==undefined?'':json.result.addressComponent.country;
                           province = json.result.addressComponent.province==undefined?" ":json.result.addressComponent.province;
                           currentCityName = json.result.addressComponent.city==undefined?" ":json.result.addressComponent.city;//取到想要的某个城市
                           district = json.result.addressComponent.district==undefined?" ":json.result.addressComponent.district;
                           town = json.result.addressComponent.town==undefined?" ":json.result.addressComponent.town;
                           street = json.result.addressComponent.street==undefined?" ":json.result.addressComponent.street;
                           street_number = json.result.addressComponent.street_number==undefined?" ":json.result.addressComponent.street_number;
                           addr = json.result.pois.addr==undefined?" ":json.result.pois.add;
                        }
                       //html拼接
                        html+="<div>百度地图:"+country
                            +" "+province+" "+currentCityName
                            +" "+district+" "+town+" "+street
                            +" "+street_number+" "+addr
                            +"</div>"   
                            +"<hr/>";
                   },
                   error:function(){
                   }
               });
               console.log(3)
        }
        $("#list").html(html)
        console.log(4)
    }  

发现console.log打印出来是这样的:

跟我想要的完全不一样,我逻辑想要的是1231231231234,然而直到最后4打印出来后面才执行了for里面的ajax

解决方式(递归,不知道有没有更好的):

function refresh()   
    {   
        html="";
        $("#list").html(html)
        getPos()
        index=0;
        //递归
        getHtml()
    }  

    var index=0;
    //递归
    function getHtml(){
        if(index>=pos.length){
            $("#list").html(html)
            //console.log(4)
            console.log(4)
            return;
        }   
        var time = pos[index].time;
        var posData = pos[index].data;
        var d = eval('('+posData+')');
        html+="<div>"+time+"</div>"
            +"<div>腾讯地图:"+d.nation+" "+d.province
            +" "+d.city+" "+d.district+" "+d.addr+"</div>"
        var loc = d.lat+","+d.lng;

            //console.log(1)
            console.log(1)

          var url = "http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location="+loc+"&output=json&pois=1&ak=eoxspRnxjZ9hTsRorgM63SpcM5GSEYKI";
           $.ajax({
               async:false,
               cache:false,
               type: "GET",
               dataType: "jsonp",
               url: url,
               success: function (json) {
                   //console.log(2)
                    console.log(2)

                   if(json.status==0){
                       country = json.result.addressComponent.country==undefined?'':json.result.addressComponent.country;
                       province = json.result.addressComponent.province==undefined?" ":json.result.addressComponent.province;
                       currentCityName = json.result.addressComponent.city==undefined?" ":json.result.addressComponent.city;//取到想要的某个城市
                       district = json.result.addressComponent.district==undefined?" ":json.result.addressComponent.district;
                       town = json.result.addressComponent.town==undefined?" ":json.result.addressComponent.town;
                       street = json.result.addressComponent.street==undefined?" ":json.result.addressComponent.street;
                       street_number = json.result.addressComponent.street_number==undefined?" ":json.result.addressComponent.street_number;
                       addr = json.result.pois.addr==undefined?" ":json.result.pois.add;
                    }

                    html+="<div>百度地图:"
                          +country+" "+province+" "+currentCityName+" "+district+" "+town+" "+street+" "+street_number+" "+addr
                          +"</div>" 
                          +"<hr/>";
                    index++;
                    getHtml();
               },
               error:function(){
                   index++;
                   getHtml();
               }
           });
    }

解决了问题,但感觉有点麻烦,数据一多,要等很久才会有反应

后续:

1. 数据多了,怎么加快解决方式:(我有两个网页,一个是获取他人位置,简称a,另一个是看到所有人的位置信息,简称b)
   其实很简单,在a读取到一个玩家位置,百度解析,把位置和百度解析数据通过servlet存入数据库,再调用另一个网页b,直接读取数据库所有位置信息就行
2. 为什么这里async:false,设置为同步,也不对:
   jsonp是跨域处理请求,我理解就是从别的服务器里面拿东西
   然后jsonp官方是不支持同步,官方链接
   
   翻译: