最近一直在忙着项目 ,作为新人在最近的开发中遇到一个ajax异步返回封装后数据的问题 我觉的有必要写下来 ,直接上代码
function initOptions(){
//ajax连接数据库查出数据库中最新有数据的年份并且判断上半年还是下半年返回对应的数组
$.ajax({
url:"/mobilePopulation/Geographic/caseNewestMonths",
dataType:'json',
type:'post',
success:function(data){
for(var i=0;i<data.yearsHasData.length;i++){
$(".yearSelector").append(
"<option>"+data.yearsHasData[i]+"年</option>"
);
}
//根据第一个和最后一个有数据的月对应数字动态设置滑块的初始位置
var fistMonthhd = data.monthHasData[0];
var lastMonthhd = data.monthHasData[data.monthHasData.length-1];
//上半年和下半年减的数字不一样
if(data.ifFistHalf==true){
option.div1val=Math.abs(fistMonthhd-1);
option.div2val=5-Math.abs(fistMonthhd-1)-Math.abs(lastMonthhd-6);
option.div3val=Math.abs(lastMonthhd-6);
}else{
option.div1val=Math.abs(fistMonthhd-7);
option.div2val=5-Math.abs(fistMonthhd-7)-Math.abs(lastMonthhd-12);
option.div3val=Math.abs(lastMonthhd-12);
}
//动态拼接初始日期
var SliderDate;
if(lastMonthhd.length==1){
SliderDate = $('.yearSelector option:selected').text().substring(0,4)+"-0"+lastMonthhd;
}else{
SliderDate = $('.yearSelector option:selected').text().substring(0,4)+"-"+lastMonthhd;
}
//滑块横坐标
option.vv = SliderDate;
option.showMonths=data.monthXis;
console.log("ajax");
console.log(SliderDate);
console.log(option);
}
return option
});
})
}
这段代码的主要实现的功能是 设置一个滑块的的初始位置和一个他显示的有数据的月份 这些操作都封装在一个option对象里面 。而该option的构造是通过ajax实现的
我们都知道ajax是异步的 它的success回调方法不一定执行 故这段代码在跑的时候会存在问题 ajax 还没来的及success 而程序已经return 了,那么怎么解决这个问题
我这里直接简单粗暴的将ajax设成 async:false, 这样程序就是从上往下执行 确保option里面也有封装的数据。
当然,只是我作为一个新手程序猿的解决方法,可能有些low,还请以后看到这个博客的技术大神指出还有啥方法解决,小弟不胜感激。