Jquery ajax 同步阻塞引起的UI线程阻塞问题

最近做一个项目，遇到了一个问题同步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(){
$(“.loadingicon”).show();
var data = getData1();
$(“.loadingicon”).hide();
alert(data);
});

请求之前显示loading图片，请求完成后把它隐藏。看起来也没什么问题。为了看清效果，我的p.php代码sleep了3秒，如下：