這篇文章主要為大家展示了“如何解決js+ajax同步請求造成瀏覽器假死的問題”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決js+ajax同步請求造成瀏覽器假死的問題”這篇文章吧。

成都創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)與策劃設(shè)計,名山網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:名山等地區(qū)。名山做網(wǎng)站價格咨詢:18982081108

一、問題的起因

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

/**
  * 異步當(dāng)前用戶積分 by zgw 20161216
  * @return {[type]} [description]
 */
 function flushIntegralSum() {
　　　　　//點擊按鈕刷新前修改按鈕的文案，已經(jīng)去掉點擊事情，防止多次點擊
  $("#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;
   }
  });
 }

本以為這么簡單的功能喀喀喀隨便寫寫就沒事了，在運行的時候出現(xiàn)了問題，當(dāng)用戶點擊刷新積分按鈕時，文案沒有修改為"正在刷新",但是ajax請求發(fā)送了，于是我查看網(wǎng)頁代碼，發(fā)現(xiàn)js其實把文案和html元素綁定的onclick事件去掉了，在請求成功后有變回原來的了，但是頁面上邊文案沒有改變，當(dāng)時很奇怪，不知道為什么html代碼里邊改變了，頁面卻沒有變點變化

二、了解問題原因

問題的根源：當(dāng)時我進行了排查，最后發(fā)現(xiàn)是 "async:false" 的問題，換成異步的就沒有問題了，那為什么同步請求會產(chǎn)生代碼失效的問題呢？

原因：瀏覽器的渲染(UI)線程和js線程是互斥的，在執(zhí)行js耗時操作時，頁面渲染會被阻塞掉。當(dāng)我們執(zhí)行異步ajax的時候沒有問題，但當(dāng)設(shè)置為同步請求時，其他的動作（ajax函數(shù)后面的代碼，還有渲染線程）都會停止下來。即使我的DOM操作語句是在發(fā)起請求的前一句，這個同步請求也會“迅速”將UI線程阻塞，不給它執(zhí)行的時間。這就是代碼失效的原因。

三、解決問題

1.我當(dāng)時使用了 setTimeout 來解決，把ajax代碼放在sestTimeout中，讓瀏覽器重啟一個線程來操作，這樣就解決問題了，代碼如下：

function flushIntegralSum() {
　　　　　//點擊按鈕刷新前修改按鈕的文案，已經(jīng)去掉點擊事情，防止多次點擊
  $("#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的第二個參數(shù)設(shè)為0，瀏覽器會在一個已設(shè)的最小時間后執(zhí)行

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

2.使用 Deferred來解決

以上是“如何解決js+ajax同步請求造成瀏覽器假死的問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

新聞標(biāo)題：如何解決js+ajax同步請求造成瀏覽器假死的問題
標(biāo)題網(wǎng)址：http://jinyejixie.com/article22/gpsccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、虛擬主機、網(wǎng)頁設(shè)計公司、關(guān)鍵詞優(yōu)化、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)