解决js ajax同步请求造成浏览器假死的问题
一、问题的起因
今天做一个需求遇到了这么个情况，就是用户个人中心有个功能，点击按钮，可以刷新用户当前的积分，这个肯定需要使用到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同步请求造成浏览器假死的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了7个好用的TypeScript新功能，想了解TypeScript的同学，一定要看一下2021-05-05
这篇文章主要介绍了TinyMCE提交AjaxForm获取不到数据的解决方法,实例分析了对应的源码部分与相应的解决方法,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
最近心血来潮，用JavaScript实现了Windows自带的扫雷游戏。当前只实现了基本功能，还有一个缺点就是只能在IE上正常运行，估计是事件没有处理好。2009-05-05
这篇文章主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
这篇文章主要为大家详细介绍了如何使用JavaScrip实现图片压缩与分辨率等比例缩放,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
javascript 控制超级链接的样式代码...2007-08-08
这篇文章主要为大家详细介绍了Javascript实现登录框拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了js实现上下滑动轮播，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
清除标签的方法有很多，下面有个不错的示例可以清楚div下面的所有标签,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了JSON字符串和JSON对象相互转化方法,结合实例形式详细分析了json对象与字符串的功能、使用、转换方法及相关注意事项,需要的朋友可以参考下2017-01-01
最新评论