jQuery同步Ajax带来的UI线程阻塞问题及解决办法_脚本技术_前端技术
您的位置： &
& 详细内容
遇到了同步Ajax引起的UI线程阻塞问题，在此记录一下。
　　事情起因是这样的，因为页面上有多个相似的异步请求动作，本着提高代码可重用性的原则，我封装了一个名为getData的函数，它接收不同参数，只负责获取数据，然后把数据return。基本的逻辑剥离出来是这样的：
function getData1(){
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& 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秒，如下：
echo ("aaaaaa");
但是我运行的时候问题出现了，我点击按钮并未像预想的那样出现这个loading图片，页面什么反应也没有。排除良久找到了原因，就在async:false这里。
浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会&迅速&将UI线程阻塞，不给它执行的时间。这就是代码失效的原因。
setTimeout解决阻塞问题
　　既然明白了问题在哪里，我们就来针对性想办法。为了不让同步ajax请求阻塞线程，我想到了setTimeout，把请求的代码放到sestTimeout中，让浏览器重启一个线程来操作，不就解决问题了吗？于是乎，我的代码就变成了这样：
$(".btn2").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& setTimeout(function(){
&&&&&&&&&&& $.ajax({
&&&&&&&&&&&&&&& url : "p.php",
&&&&&&&&&&&&&&& async : false,
&&&&&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&&&&&&&&&& alert(data);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& });
&&&&&&& }, 0);
　　setTimeout的第二个参数设为0，浏览器会在一个已设的最小时间后执行。不管三七二十一先运行起来看看。
　　结果loading图片显示出来了，但是！！！图片怎么不动呢，我明明是一张动态gif图。这个时候我很快就想到了，虽然同步请求延迟执行了，但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼，连gif图片都不动了，看起来像一张静态图片一样。
　　结论很明显，setTimeout治标不治本，相当于把同步请求&稍稍&异步了一下，接下来还是会进入同步的噩梦，阻塞线程。方案失败。
是时候用Deferred了
　　jQuery在1.5版本之后，引入了Deferred对象，提供的很方便的广义异步机制。详情可参看阮一峰老师的这篇文章。
　　于是我用Deferred对象改写了代码，如下：
function getData3(){
&&&&&&& var defer = $.Deferred();
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& //async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& defer.resolve(data)
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& return defer.promise();
$(".btn3").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& $.when(getData3()).done(function(data){
&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&& alert(data);
&&&&&&& });
　　可以看到我在ajax请求中去掉了async:false，也就是说，这个请求又是异步的了。另外请注意success函数中的这一 句：defer.resolve(data)，Deferred对象的resolve方法可传入一个参数，任意类型。这个参数可以在done方法中拿到， 所以我们异步请求来的数据就可以以这样的方式来返回了。
　　至此，问题得到了解决。Deferred对象如此强大且方便，我们可以好好利用它。
　　我的全部测试代码如下，有意的同学可以拿去测一下：
&button class=&btn1&&async:false&/button&
&button class=&btn2&&setTimeout&/button&
&button class=&btn3&&deferred&/button&
&img class=&loadingicon& style=&position:left:50%;top:50%;margin-left:-16margin-top:-16display:& src=/Web/Jquery/&loading2.gif& alt=&正在加载& /&
&&& function getData1(){
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& result =
&&&&&&&&&&& }
&&&&&&& });
&&& $(".btn1").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& var data = getData1();
&&&&&&& $(".loadingicon").hide();
&&&&&&& alert(data);
&&& $(".btn2").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& setTimeout(function(){
&&&&&&&&&&& $.ajax({
&&&&&&&&&&&&&&& url : "p.php",
&&&&&&&&&&&&&&& async : false,
&&&&&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&&&&&&&&&& alert(data);
&&&&&&&&&&&&&&& }
&&&&&&&&&&& });
&&&&&&& }, 0);
&&& function getData3(){
&&&&&&& var defer = $.Deferred();
&&&&&&& $.ajax({
&&&&&&&&&&& url : "p.php",
&&&&&&&&&&& //async : false,
&&&&&&&&&&& success: function(data){
&&&&&&&&&&&&&&& defer.resolve(data)
&&&&&&&&&&& }
&&&&&&& });
&&&&&&& return defer.promise();
&&& $(".btn3").click(function(){
&&&&&&& $(".loadingicon").show();
&&&&&&& $.when(getData3()).done(function(data){
&&&&&&&&&&& $(".loadingicon").hide();
&&&&&&&&&&& alert(data);
&&&&&&& });
&&& });&/script&
PS:Firefox有做优化？
　　上述问题在chrome和IE9中测试结论一致。但是我在Firefox中测试时，同步ajax并未阻塞掉UI线程，也就是说这个问题根本不存 在。我用其他代码做了测试，在Firefox中js线程确实是会阻塞UI线程，这个没有疑问。那可能的一个猜测就是Firefox对同步ajax做了优 化，事实到底是什么，我暂未得知。有高人知道还请指点。
( 18:52:52)
( 18:52:50)
( 15:49:41)
( 15:48:44)
( 11:42:57)
( 11:42:55)
( 16:55:05)
( 13:46:01)
相关排行总榜ajax同步方式提交-中国学网-中国IT综合门户网站
> ajax同步方式提交
ajax同步方式提交
转载 编辑：李强
为了帮助网友解决“ajax同步方式提交”相关的问题，中国学网通过互联网对“ajax同步方式提交”相关的解决方案进行了整理,用户详细问题包括:RT,我想知道:ajax同步方式提交，具体解决方案如下：解决方案1：&#47, Safari xmlhttp=new XMLHttpRequest(),15}$&#47.test(tmp)){span_group_false&quot, IE5 xmlhttp=new ActiveXObject(&).getElementsByName(&quot.XMLHttpRequest) {&#47;).getElementById(& 要同步提交;&#47;可以注册& var re = &#47;nicen&quot, Firefox.getElementById(&adv&#47;w{3.Microsoft.responseText == &chaxun0&quot, O; if().getElementById(& code for IE7+; code for IE6,true);.item(0);){ document.onreadystatechange=function() { if (span_group_ture&+tmp.innerText=xmlhttp,&quot.send().^[a-zA-z]&#92.readyState==4 &&);chaxun0&; } if (window.responseTuseryz, C);GET& } else {&#47; }else{ document.XMLHTTP&.className=&quot.status==200) { document.open(& if(chaxun0&quotvar tmp= } } } xmlhttp?nicen=& xmlhttp.className=&quot解决方案2：注册页面,先验证获取返回的数据后,函数过程返回为true类似那种解决方案3：<通过对数据库的索引,我们还为您准备了：问：献上jquery代码: //弹出提示信息。是div锁屏效果..(使用了插件，效果一...答：你把你的sAlert("提示消息");放在ajax的 beforeSend (Function) 里执行就可以了 beforeSend:function () { sAlert("提示消息"); }===========================================问：详细说下 高手指点答：同步交互，就是最常见的click-refresh模式，点一个连接或提交一个表单，然后整个页面被刷新 异步交互，当前很热的AJAX就是典型例子，提交请求返回对象是不可见的层，然后用javascripts根据返回数据，改变当前页面显示，譬如google map===========================================问：详细说下 高手指点答：Ajax请求默认的都是异步的如果想同步 async设置为false就可以（默认是true）如果是jquery: $.ajax({url: some.php,async: false,success : function(){}});如果是原生的js： xmlHttp.open("POST",url,false);希望能帮到你~ ===========================================问：详细说下 高手指点答：使用这个jQuery.ajax，里面有个async属性，设置为false就可以了===========================================问：代码如下： function Popup(url){ var returnurl=""; $.ajax({ type: "G...答：为什么要同步调用呢。这个的确是会出现假死。还是异步调用吧，我前段时间也遇到过，后来改用异步调用才行。 异步调用在循环发出ajax请求的时候会出现不一致的现象，这种情况值能在当前的请求结束之后，在发出下一个请求，只能这样。用异步调用虽...===========================================问：代码如下： function Popup(url){ var returnurl=""; $.ajax({ type: "G...答：如果是用jQuery，设置async属性为true就可以了===========================================问：代码如下： function Popup(url){ var returnurl=""; $.ajax({ type: "G...答：async Boolean(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行===========================================问：AJAX用异步方式刷新div正常，但是同步方式只能获得值，无法显示在div里...答：用jquery吧===========================================问：$(function(){ $("#").click(function(){ $.ajax({ type:"get", url:"mv...答：url:"mvc/community/map!create.action?lng="+point.lng + "&lat="+point.lat, 你网址“？”後面是参数，提交的路径不能携带参数。携带参数要用data属性： var p = point. var l = point.lat,; var params = { lng:p, lat=l }; //携带参数要在...===========================================为什么要同步调用呢。这个的确是会出现假死。还是异步调用吧,我前段时间也遇到过,后来改用异步调用才行。异步调用在循环发出ajax请求的时候会出现不一致的现象,这种情...===========================================同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后整个页面被刷新 异步交互,当前很热的AJAX就是典型例子,提交请求返回对象是不可见的层,然后用java...===========================================那要看你调用遮挡层的语句是在什么位置,如果是在返回函数中调用,当然就是请求完毕的时候遮挡了,遮挡层的调用应该在刚进去ajax请求的时候~~===========================================ajax同步:程序一直按顺序执行下去。可控符合逻辑无bug。 步骤。提交请求执行事件。事件执行请求服务器处理。服务器处理完毕返回事件继续执行或者结束。 ajax异步:程序...=========================================== 还在用extjs撒。。。。===========================================POST", url, false); 第三个参数就是设置AJAX是以什么方式进行数据交互的,如果是false那么就是同步方式,这样就会实现你所想要的,但是有一个缺点,同步Ajax期间,浏览...=========================================== 好比当当(其实现在当当的搜索也已经实现了AJAX异步提交),你在输入一本书的名字,点击搜索按钮后,服务器返回一个该书名的页面给用户 最先实现AJAX异步提交的当属...===========================================你用 alert(data).输出 ajax 获取的数据。 在$.ajax()中 可以输出数据 在$.post()中 alert 没用,什么都不输出。 如果你的$.post() 使用的是&#39;json&#39; 的方式。那说...===========================================并允许程序同步或者异步处理服务器发送的数据。和传统的"submit"方式不同,数据的提交以及之后的处理不需要页面的切换,为用户在浏览器上提供了优秀的交互方式。 Ajax的...=========================================== ajax只是一种方式,当然可以通过把json放其它地方(如隐藏域)的方式和其它一起提交。而且效果还是一种的,你后台json_decode就可以了===========================================
本文欢迎转载，转载请注明：转载自中国学网： []
用户还关注
可能有帮助如何设置jquery的ajax方法为同步_百度知道
如何设置jquery的ajax方法为同步
Ajax请求默认的都是异步的
如果想同步 async设置为false就可以（默认是true）
var html = $.ajax({
url: some.php,
async: false
}).responseT
或者在全局设置Ajax属性
$.ajaxSetup({
再用post，get就是同步的了
其他类似问题
为您推荐：
您可能关注的推广
jquery的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁最新评论最近读者标签
博客统计文章：329篇页面：3个分类：8个标签：626个评论：360条用户：4013人浏览：534733次运行：679天jquery&ajax方法小细节之同步
为了模拟做一个极其简单可配置页面&&
打算从xml里面读出组件内容& 然后
用jquery生成相应的模块。对于文件的读取& jquery提供了相当方便的方法
ajax。基本的语法就不介绍了&&
极其简单& 举一个基本的例子
& type: "GET",
& url: "test.xml",
& dataType: "xml"
这样就能获取到名字为test的xml内容& 接着做相应的解析就可以了
但是& 在ajax方法中有个小细节&
是我平时没有注意到的&
不知道大家注意了没有。就是在ajax中的同步问题，也就是这个问题&&
困扰了我几个小时。
情况是这样&&&在我的xml文件中有这些内容
&function&
&/function&
在我的jquery代码中是这样的
$(document).ready(function(){
var arr=new Array();　
$.ajax({url:"test.xml",dataType:"xml",success:function(xml){
arr=$(xml).find('f');
alert(arr.length)
结果打印出来的是0&&
也就是在arr中的赋值语言看起来是无效的& 正常情况应该是2
经过我的研究& 也不知道对不对&
有问题可以提出
在jquery中是异步执行机制&&
也就可以理解为& 在上面那段代码中&
ajax方法和alert方法是同时执行的&&
也就是说有可能在ajax方法还没执行完的时候 就执行了alert方法& 所以打印出的是0
解决办法就是修改为同步执行&
就是先把ajax方法执行完了才执行ajax以下的代码&
修改也很简单& 就是在ajax方法参数中添加async:false
也就是把jquery代码改为
$(document).ready(function(){
var arr=new Array();　
$.ajax({url:"test.xml",dataType:"xml",async:false，success:function(xml){
arr=$(xml).find('f');
alert(arr.length)
就可以了&& 运行结果为打印2
就是这个破参数& 浪费了我几小时啊 他妹的&
细节这玩意真不是一般的重要啊& 哥以后得从细节抓起了&
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。}