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


Posted in Javascript onNovember 17, 2015

最近做一个项目,遇到了一个问题同步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秒,如下:

<?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对象,提供的很方便的广义异步机制。详情可参看阮一峰老师的这篇文章http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html。

于是我用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:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src=http://www.update8.com/Web/Jquery/"loading2.gif" alt="正在加载" />
<script>
  function getData1(){
    var result;
    $.ajax({
      url : "p.php",
      async : false,
      success: function(data){
        result = data;
      }
    });
    return 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:$.ajax的参数描述

参数 描述

url 必需。规定把请求发送到哪个 URL。
data 可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR) 可选。请求成功时执行的回调函数。
dataType 
可选。规定预期的服务器响应的数据类型。
默认执行智能判断(xml、json、script 或 html)。

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
jquery判断密码强度的验证代码
Apr 22 #Javascript
jquery实现邮箱自动填充提示功能
Nov 17 #Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 #Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 #Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 #Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 #Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
Nov 17 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
php显示时间常用方法小结
2015/06/05 PHP
ajax调用返回php接口返回json数据的方法(必看篇)
2017/05/05 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jQuery 前的按键判断代码
2010/03/19 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
phpsir 开发 一个检测百度关键字网站排名的python 程序
2009/09/17 Python
Python 代码性能优化技巧分享
2012/08/07 Python
python中global用法实例分析
2015/04/30 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
业务主管岗位职责范本
2013/12/25 职场文书
市场部规章制度
2014/01/24 职场文书
食品采购员岗位职责
2014/04/14 职场文书
小学生作文评语大全
2014/04/21 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014年大学班级工作总结
2014/11/14 职场文书
2019通用版导游词范本!
2019/08/07 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python