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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
jquery插件懒加载的示例
Oct 24 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
「OVERLORD」动画重要删减!雅儿贝德的背叛?至尊猎杀队结成
2020/04/09 日漫
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
JS获取IUSR_机器名和IWAM_机器名帐号的密码
2006/12/06 Javascript
Opacity.js
2007/01/22 Javascript
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
jQuery选择器的工作原理和优化分析
2011/07/25 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
2013/12/08 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
基于python爬虫数据处理(详解)
2017/06/10 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
Python运算符+与+=的方法实例
2021/02/18 Python
.net软件工程师应聘上机试题
2015/03/10 面试题
你对IPv6了解程度
2016/02/09 面试题
高等教育专业自荐信范文
2014/03/26 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
综合测评自我评价
2015/03/06 职场文书
golang正则之命名分组方式
2021/04/25 Golang
七个非常实用的Python工具包总结
2021/06/15 Python