web前端开发|ajax异步模式下实现同步和等待loading效果（jQuery同步Ajax带来的UI线程阻塞问题及解决办法） web前端开发|jquery

在与后台实现数据交互时经常会遇到一种这样的情况：
1.需要用一个ajax请求后台数据，并且要在获取到数据之后再渲染到页面，这个时候就必须用同步（async:false）。
2.然而在这个时候就会有另一种情况，当ajax的请求花费的时间比较长的时候需要一个loading层来显示等待状态
3.这个时候beforeSend是没有效果的，即使把loading的代码写在ajax之前也不行。
4.原因就是ajax的async设置为false时浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。
5.解决方法使用jquery的$.Deferred()和$.when().done(）来实现异步下达到同步执行的效果（注意：是在异步下实现的）：如图

function getAjaxData() {var defer = $.Deferred(); $.ajax({ url: '', type: 'post', data: '', async: true, dataType: 'json', success: function (data) { defer.resolve(data); } }); return defer; }// 执行 $('#id').click(function () {showLoading(); // 显示等待图标$.when(getAjaxData()).done(function (data) {closeLoading(); // 隐藏等待图标console.log(data); // 执行其他代码 }); });

相关链接：

http://www.cnblogs.com/lvdabao/p/3744030.html
【web前端开发|ajax异步模式下实现同步和等待loading效果（jQuery同步Ajax带来的UI线程阻塞问题及解决办法）】http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html