俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下。
事情起因是这样的,因为网页上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return。基本的逻辑剥离出来是这样的:
function getData1(){
var result;
$.ajax({
url : 'p.php',
async : false,
success: function(data){
result = data;
}
});
return result;
}
这里的ajax不能用异步的,否则函数返回时,result还未赋值,会出错。所以我加了async:false。看起来好像没什么问题。我调用这个函数可以正常的得到数据。
$('.btn1').click(function(){
var data = getData1();
alert(data);
});
接下来,要加另外一个功能,由于ajax请求有一定的耗时,所以我需要在发出请求前网页有个loading效果,即显示一张“正在加载”的gif图片,想必大家也都见过。所以我的处理函数就变成了这样:
$('.btn1').click(function(){
<