在发起同步Ajax请求时设置的等待图片在IE与Chrome浏览器不显示,在firefox里面正常,通过Chrome debug模式发现,它是会显示的,由于后面的计算是JQuery同步操作,需要过长时间计算,导致界面UI卡死(来不及展示)。
浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求 时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线 程阻塞,不给它执行的时间。这就是代码失效的原因。
jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。
deferred对象就是jQuery的回调函数解决方案,deferred对象的含义就是"延迟"到未来某个点再执行。
$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。
解决方法:使用JQuery Deferred对象。
var getWordCount = function(){
var defer = $.Deferred();
var urlStr = "postcommit.html?I_SOURCE=getxliff";
$.ajax({
url : urlStr, //async : false,表示异步执行。
success: function(dataStr){
defer.resolve(dataStr);
}
});
return defer.promise();
}
var myTotalprice = function(){
//当getWordCount() 执行完成后,执行done()以下操作。就跟同步效果一样。
$.when(getWordCount()).done(function(dataStr){
alert(dataStr);
});
}