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中的deferred使用方法
Mar 27 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery实现影院选座订座效果
Apr 13 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程序的方法
2009/03/09 PHP
php中数组首字符过滤功能代码
2012/07/31 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
js类 from qq
2006/11/13 Javascript
javascript动画效果类封装代码
2007/08/28 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
vue实现商城上货组件简易版
2017/11/27 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
node结合swig渲染摸板的方法
2018/04/11 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
django之自定义软删除Model的方法
2019/08/14 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python中温度单位转换的实例方法
2020/12/27 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
幼儿园教师请假制度
2014/01/16 职场文书
促销活动总结模板
2014/07/01 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
安全生产先进个人总结
2015/02/15 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python