jQuery Ajax async=>false异步改为同步时如何解决导致浏览器假死的问题

这篇文章主要介绍jQuery Ajax async=>false异步改为同步时如何解决导致浏览器假死的问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

大概代码如下：

/**   * 异步当前用户积分 by zgw 20161216   * @return {[type]} [description]  */  function flushIntegralSum() { 　　　　　//点击按钮刷新前修改按钮的文案，已经去掉点击事情，防止多次点击   $("#flushbutton").replaceWith('<a  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  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  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  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"  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异步改为同步时如何解决导致浏览器假死的问题”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！