解决js ajax同步请求造成浏览器假死的问题


Posted in Javascript onJanuary 18, 2018

一、问题的起因

今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到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 来解决

以上这篇解决js ajax同步请求造成浏览器假死的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
JavaScript页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
VUE中v-model和v-for指令详解
Jun 23 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
vue+element实现打印页面功能
May 20 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 #Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 #Javascript
react-router4 配合webpack require.ensure 实现异步加载的示例
Jan 18 #Javascript
分享ES6的7个实用技巧
Jan 18 #Javascript
vue 动态修改a标签的样式的方法
Jan 18 #Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 #Javascript
Nuxt.js踩坑总结分享
Jan 18 #Javascript
You might like
php date()日期时间函数详解
2010/05/16 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
Extjs学习笔记之六 面版
2010/01/08 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
JS实现的二叉树算法完整实例
2017/04/06 Javascript
React操作真实DOM实现动态吸底部的示例
2017/10/23 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python+django实现文件上传
2016/01/17 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python通过socketserver处理多个链接
2020/03/18 Python
Jupyter加载文件的实现方法
2020/04/14 Python
五种Python转义表示法
2020/11/27 Python
CSS3为背景图设置遮罩并解决遮罩样式继承问题
2020/06/22 HTML / CSS
白宫黑市官网:White House Black Market
2016/11/17 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
新闻专业学生的自我评价
2014/02/13 职场文书
如何写好自荐信
2014/04/07 职场文书
人事任命书格式
2014/06/05 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
无故旷工检讨书
2015/08/15 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
python操作xlsx格式文件并读取
2021/06/02 Python
JavaScript 反射学习技巧
2021/10/16 Javascript
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers