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官方是不支持同步,官方链接
   
   翻译: