jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题


Posted in jQuery onJuly 22, 2019

今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下:

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {

 //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击
  $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>');
  $.ajax({
   url:'URL',
   type:'post',
   async:false,
   // data:{},
   success:function(json){
    json = eval('('+json+')');
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>');
    if(json.code!=1){
     alert(json.msg);
    }else{
     $("#free_sum").html(json.free_sum);
    }
    return;
   }
  });
 }

本以为这么简单的功能喀喀喀随便写写就没事了,在运行的时候出现了问题,当用户点击刷新积分按钮时,文案没有修改为"正在刷新",但是ajax请求发送了,于是我查看网页代码,发现js其实把文案和html元素绑定的onclick事件去掉了,在请求成功后有变回原来的了,但是页面上边文案没有改变,当时很奇怪,不知道为什么html代码里边改变了,页面却没有变点变化

二、了解问题原因

问题的根源:当时我进行了排查,最后发现是 "async:false" 的问题,换成异步的就没有问题了,那为什么同步请求会产生代码失效的问题呢?

原因:浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间。这就是代码失效的原因。

三、解决问题

1.我当时使用了 setTimeout 来解决,把ajax代码放在sestTimeout中,让浏览器重启一个线程来操作,这样就解决问题了,代码如下:

 

function flushIntegralSum() {

 //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击
  $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="flushbutton">正在刷新</a>');
  setTimeout(function(){
   $.ajax({
    url:'URL',
    type:'post',
    async:false,
    // data:{},
    success:function(json){
     json = eval('('+json+')');
     if(json.url){window.location.href=json.url;return;}
     $("#flushbutton").replaceWith('<a style="color:#3fb0ff;font-size:14px;" href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="flushFreeSum();" id="flushbutton">刷新积分</a>');
     if(json.code!=1){
      alert(json.msg);
     }else{
      $("#free_sum").html(json.free_sum);
     }
     return;
    }
   });
  },0) 
 }

setTimeout的第二个参数设为0,浏览器会在一个已设的最小时间后执行

到这里问题就解决了,但是你可以试试当你点击按钮的时候如果需要弹出一个gif图片,并且图片一直在旋转,提示更新中,你会发现图片虽然会显示,但是图片却是不动的,那是因为虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程,这种方法只适合发请求之前操作简单的时间短的情况

2.使用 Deferred 来解决

jQuery在1.5版本之后,引入了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="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>

以上这篇jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
jquery插件开发模式实例详解
Jul 20 #jQuery
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
jquery图片预览插件实现方法详解
Jul 18 #jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 #jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 #jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 #jQuery
You might like
php 代码优化的42条建议 推荐
2009/09/25 PHP
php 接口类与抽象类的实际作用
2009/11/26 PHP
PHP生成压缩文件实例
2015/02/07 PHP
PHP处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
jquery html动态生成select标签出问题的解决方法
2013/11/20 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
Angular2进阶之如何避免Dom误区
2018/04/02 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python 调用有道api接口的方法
2019/01/03 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python实现自动打卡的示例代码
2020/10/10 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
Collection和Collections的区别
2016/05/02 面试题
党员违纪检讨书
2014/02/18 职场文书
机电一体化求职信
2014/03/10 职场文书
服务理念标语
2014/06/18 职场文书
2014年调度员工作总结
2014/11/19 职场文书