经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » 浏览器 » 查看文章
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
来源:jb51  时间:2019/7/23 8:29:55  对本文有异议

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

  1. /**
  2. * 异步当前用户积分 by zgw 20161216
  3. * @return {[type]} [description]
  4. */
  5. function flushIntegralSum() {
  6.      //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击
  7. $("#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>');
  8. $.ajax({
  9. url:'URL',
  10. type:'post',
  11. async:false,
  12. // data:{},
  13. success:function(json){
  14. json = eval('('+json+')');
  15. if(json.url){window.location.href=json.url;return;}
  16. $("#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>');
  17. if(json.code!=1){
  18. alert(json.msg);
  19. }else{
  20. $("#free_sum").html(json.free_sum);
  21. }
  22. return;
  23. }
  24. });
  25. }

本以为这么简单的功能喀喀喀随便写写就没事了,在运行的时候出现了问题,当用户点击刷新积分按钮时,文案没有修改为"正在刷新",但是ajax请求发送了,于是我查看网页代码,发现js其实把文案和html元素绑定的onclick事件去掉了,在请求成功后有变回原来的了,但是页面上边文案没有改变,当时很奇怪,不知道为什么html代码里边改变了,页面却没有变点变化

二、了解问题原因

问题的根源:当时我进行了排查,最后发现是 "async:false" 的问题,换成异步的就没有问题了,那为什么同步请求会产生代码失效的问题呢?

原因:浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使我的DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线程阻塞,不给它执行的时间。这就是代码失效的原因。

三、解决问题

1.我当时使用了 setTimeout 来解决,把ajax代码放在sestTimeout中,让浏览器重启一个线程来操作,这样就解决问题了,代码如下:

 

  1. function flushIntegralSum() {
  2.      //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击
  3. $("#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>');
  4. setTimeout(function(){
  5. $.ajax({
  6. url:'URL',
  7. type:'post',
  8. async:false,
  9. // data:{},
  10. success:function(json){
  11. json = eval('('+json+')');
  12. if(json.url){window.location.href=json.url;return;}
  13. $("#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>');
  14. if(json.code!=1){
  15. alert(json.msg);
  16. }else{
  17. $("#free_sum").html(json.free_sum);
  18. }
  19. return;
  20. }
  21. });
  22. },0)
  23. }

setTimeout的第二个参数设为0,浏览器会在一个已设的最小时间后执行

到这里问题就解决了,但是你可以试试当你点击按钮的时候如果需要弹出一个gif图片,并且图片一直在旋转,提示更新中,你会发现图片虽然会显示,但是图片却是不动的,那是因为虽然同步请求延迟执行了,但是它执行期间还是会把UI线程给阻塞。这个阻塞相当牛逼,连gif图片都不动了,看起来像一张静态图片一样。结论很明显,setTimeout治标不治本,相当于把同步请求“稍稍”异步了一下,接下来还是会进入同步的噩梦,阻塞线程,这种方法只适合发请求之前操作简单的时间短的情况

2.使用 Deferred 来解决

jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。

  1. function getData3(){ var defer = $.Deferred();
  2. $.ajax({
  3. url : 'p.php', //async : false,
  4. success: function(data){
  5. defer.resolve(data)
  6. }
  7. }); return defer.promise();
  8. }
  9. $('.btn3').click(function(){
  10. $('.loadingicon').show();
  11. $.when(getData3()).done(function(data){
  12. $('.loadingicon').hide();
  13. alert(data);
  14. });
  15. });

可以看到我在ajax请求中去掉了async:false,也就是说,这个请求又是异步的了。另外请注意success函数中的这一句:defer.resolve(data),Deferred对象的resolve方法可传入一个参数,任意类型。这个参数可以在done方法中拿到,所以我们异步请求来的数据就可以以这样的方式来返回了。

至此,问题得到了解决。Deferred对象如此强大且方便,我们可以好好利用它。

  1. <button class="btn1">async:false</button><button class="btn2">setTimeout</button><button class="btn3">deferred</button>
  2. <img class="loadingicon" style="position:fixed;left:50%;top:50%;margin-left:-16px;margin-top:-16px;display:none;" src="loading2.gif" alt="正在加载" /><script>
  3. function getData1(){ var result;
  4. $.ajax({
  5. url : 'p.php',
  6. async : false,
  7. success: function(data){
  8. result = data;
  9. }
  10. }); return result;
  11. }
  12. $('.btn1').click(function(){
  13. $('.loadingicon').show(); var data = getData1();
  14. $('.loadingicon').hide();
  15. alert(data);
  16. });
  17. $('.btn2').click(function(){
  18. $('.loadingicon').show();
  19. setTimeout(function(){
  20. $.ajax({
  21. url : 'p.php',
  22. async : false,
  23. success: function(data){
  24. $('.loadingicon').hide();
  25. alert(data);
  26. }
  27. });
  28. }, 0);
  29. }); function getData3(){ var defer = $.Deferred();
  30. $.ajax({
  31. url : 'p.php', //async : false, success: function(data){
  32. defer.resolve(data)
  33. }
  34. }); return defer.promise();
  35. }
  36. $('.btn3').click(function(){
  37. $('.loadingicon').show();
  38. $.when(getData3()).done(function(data){
  39. $('.loadingicon').hide();
  40. alert(data);
  41. });
  42. });</script>

以上这篇jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号