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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery中的deferred对象和extend方法详解
May 08 jQuery
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery插件实现图片悬浮
Apr 16 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
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
动态加载jquery库的方法
2014/02/12 Javascript
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
Vue列表渲染的示例代码
2018/11/01 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[02:25]DOTA2英雄基础教程 熊战士
2014/01/03 DOTA
Python注释详解
2016/06/01 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python线程中同步锁详解
2018/04/27 Python
对python中的logger模块全面讲解
2018/04/28 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
村委会贫困证明
2014/01/14 职场文书
股东协议书
2014/04/14 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js