js 同步ajax在IE上會產生頁面假死的問題

一、問題的起因

今天做乙個需求遇到了這麼個情況，就是使用者個人中心有個功能，點選按鈕，可以重新整理使用者當前的積分，這個肯定需要使用到ajax的同步請求了，當時喀喀喀三下五除二寫玩了，大概**如下：

/**
* 非同步當前使用者積分 by zgw 20161216
* @return  [description]
*/function flushintegralsum() ,
success:function(json)
$("#flushbutton").replacewith('重新整理積分');
if(json.code!=1)else
return;
}});
}

本以為這麼簡單的功能喀喀喀隨便寫寫就沒事了，在執行的時候出現了問題，當使用者點選重新整理積分按鈕時，文案沒有修改為"正在重新整理",但是ajax請求傳送了，於是我檢視網頁**，發現js其實把文案和html元素繫結的onclick事件去掉了，在請求成功後有變回原來的了，但是頁面上邊文案沒有改變，當時很奇怪，不知道為什麼html**裡邊改變了，頁面卻沒有變點變化

二、了解問題原因

問題的根源：當時我進行了排查，最後發現是 "async:false" 的問題，換成非同步的就沒有問題了，那為什麼同步請求會產生**失效的問題呢？

原因：瀏覽器的渲染(ui)執行緒和js執行緒是互斥的，在執行js耗時操作時，頁面渲染會被阻塞掉。當我們執行非同步ajax的時候沒有問題，但當設定為同步請求時，其他的動作（ajax函式後面的**，還有渲染執行緒）都會停止下來。即使我的dom操作語句是在發起請求的前一句，這個同步請求也會「迅速」將ui執行緒阻塞，不給它執行的時間。這就是**失效的原因。

三、解決問題

1.我當時使用了settimeout來解決，把ajax**放在sesttimeout中，讓瀏覽器重啟乙個執行緒來操作，這樣就解決問題了，**如下：

function flushintegralsum() ,
success:function(json)
$("#flushbutton").replacewith('重新整理積分');
if(json.code!=1)else
return;
}});},0)}

settimeout的第二個引數設為0，瀏覽器會在乙個已設的最小時間後執行

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

2.使用deferred來解決

內容出自：

js 同步ajax在IE上會產生頁面假死的問題

AJAX在IE下的除錯

Jquery的ajax在IE提交資料亂碼解決方法

Easyui 在IE 環境下發ajax請求失敗

js 同步ajax在IE上會產生頁面假死的問題

AJAX在IE下的除錯

Jquery的ajax在IE提交資料亂碼解決方法

Easyui 在IE 環境下發ajax請求失敗

相關推薦