首頁 >web前端 >js教程 >有關ajax同步操作出現瀏覽器假死(詳細教學)

有關ajax同步操作出現瀏覽器假死(詳細教學)

亚连
亚连原創
2018-06-11 14:56:481421瀏覽

下面我就為大家分享一篇解決js ajax同步請求造成瀏覽器假死的問題,具有很好的參考價值,希望對大家有幫助。

一、問題的起因

今天做一個需求遇到了這麼個情況,就是用戶個人中心有個功能,點擊按鈕,可以刷新用戶當前的積分,這個肯定需要使用到ajax的同步請求了,當時喀喀喀三下五除二寫玩了,大概代碼如下:

/**
  * 异步当前用户积分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
     //点击按钮刷新前修改按钮的文案,已经去掉点击事情,防止多次点击
  $("#flushbutton").replaceWith(&#39;<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>&#39;);
  $.ajax({
   url:&#39;URL&#39;,
   type:&#39;post&#39;,
   async:false,
   // data:{},
   success:function(json){
    json = eval(&#39;(&#39;+json+&#39;)&#39;);
    if(json.url){window.location.href=json.url;return;}
    $("#flushbutton").replaceWith(&#39;<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>&#39;);
    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(&#39;<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>&#39;);
  setTimeout(function(){
   $.ajax({
    url:&#39;URL&#39;,
    type:&#39;post&#39;,
    async:false,
    // data:{},
    success:function(json){
     json = eval(&#39;(&#39;+json+&#39;)&#39;);
     if(json.url){window.location.href=json.url;return;}
     $("#flushbutton").replaceWith(&#39;<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>&#39;);
     if(json.code!=1){
      alert(json.msg);
     }else{
      $("#free_sum").html(json.free_sum);
     }
     return;
    }
   });
  },0) 
 }

setTimeout的第二個參數設為0,瀏覽器會在一個已設的最小時間後執行

到這裡問題就解決了,但是你可以試試當你點擊按鈕的時候如果需要彈出一個gif圖片,並且圖片一直在旋轉,提示更新中,你會發現圖片雖然會顯示,但是圖片卻是不動的,那是因為雖然同步請求延遲執行了,但是它執行期間還是會把UI線程給阻塞。這個阻塞相當牛逼,連gif圖片都不動了,看起來像一張靜態圖片一樣。結論很明顯,setTimeout治標不治本,相當於把同步請求“稍稍”異步了一下,接下來還是會進入同步的噩夢,阻塞線程,這種方法只適合發請求之前操作簡單的時間短的情況

2.使用Deferred 來解決

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

在Vue中如何實作自訂指令?

在vue裡面透過父元件如何修改子元件樣式

#在vue-resource中有關jsonp跨域問題

在vue webpack中如何實作非同步元件載入?

在vue.js中使用Nginx來解決跨域

在JavaScript中如何實作求最大公共子字串

在Node.js中如何實作mysql事務自動回收連線

以上是有關ajax同步操作出現瀏覽器假死(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn