级联城市因为ajax的异步请求导致的问题

无限极城市级联菜单在进行ajax的异步通信的时候 ，默认加载页面就执行方法，偶尔就会出现 页面的请求有返回值但是不能加载到DOM中去的问题，在考虑过缓存问题，尝试过加参数随机数，以及使用setInterval 和setTimeout 仍然不凑效的情况下 通过仔细分析它的ajax通信原理终于揭开谜底

出现这个问题的主要原因就是 是用jquery的异步请求的时候，页面返回值返回过来，还没有执行返回方法，就已经往下执行了，所以应该讲异步请求改为同步请求

$.ajaxSettings.async = false;

// JavaScript Document
// 城市联动
function areaAjaxReturn(check,ajaxUrl){ 
          $.ajaxSettings.async = false;//处理同步请求
	  //判断有几级 城市联动菜单 
	  $.getJSON(ajaxUrl+'/shop/add/',{'type':'jibie','t':new Date().getTime()},function(data){
	   var span = '';
	   if(data.data!= ''){
		   for(var i=0;i<2;i++){
			   span += '<span class="span span'+(i+1)+'"></span>'; 
			   }  
	       $('.area').after(span); 
		 }
	   })
		function changes(num,area,vals){ 
		$('.span').each(function(index,element) {
				if(index+1>num){ 
					$(this).html('');
				}
			});
		$.getJSON(ajaxUrl+'/type/ajax',{'pid':$('.'+area).val(),function(data){ 
		 var html = ''; 
		 if(data.data!=null){ 
			  html  = '<select class="aress area'+num+'">';
			  html += '<option value="-1">请选择</option>';  
			  $.each(data.data,function(index,val){ 
				  html += '<option value="'+val.area_code+'">'+val.area_name+'</option>';  
				 })
			  html += '</select>'; 
			 } 
			 $('.span'+num).html(html);
			 $('.area'+num).change(function(){
				 var valsz = vals;
				 if($(this).val() != '-1'){ 
				  valsz = vals+$(this).val()+',';
				 } 
				$('input[name=area]').val(valsz);
				$('input[name=area_code]').val(valsz); 
				changes(num+1,'area'+num,valsz); 
			 })
		 })   
	   }
	 $('.area').change(function(){  
		 var vals = ','+$(this).val()+',';
		 $('input[name=area]').val(vals);
		 $('input[name=area_code]').val(vals);
		  changes(1,'area',vals);  
	  })  
	  if(check){
		  $('.area').change();
	  }    
}

使用该方法引用

areaAjaxReturn(true,'__SELF__');

在执行异步请求的时候 会偶尔出现这种情况

在变成同步请求之后就不会出现这种问题，下面是正常显示的结果