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

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

下面小编就为大家分享一篇解决js ajax同步请求造成浏览器假死的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

一、问题的起因一、问题的起因

今天做一个需求遇到了这么个情况，就是用户个人中心有个功能，点击按钮，可以刷新用户当前的积分，这个肯定需要使用到ajax的同步请求了，当时喀喀喀三下五除二写玩了，大概代码如下：

/**

* 异步当前用户积分 by zgw 20161216

* @return {[type]} [description]

*/

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);

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>');

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;

执行了，但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼，连gif图片都不动了，看起来像一张静态图片一样。结论很明显，setTimeout治标不治本，相当于把同步请求“稍稍”异步了一下，接下

来还是会进入同步的噩梦，阻塞线程，这种方法只适合发请求之前操作简单的时间短的情况

2.使用 Deferred 来解决

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