jQuery的Ajax同步頁面假死/卡頓 解決辦法
阿新 • • 發佈:2019-01-01
起因: 需求是日曆中選擇不同日期,請求一次ajax,返回大量資料的時候會有頁面卡頓的錯覺,錯覺來自頁面效果一直不出現,直到資料即將完成渲染前出現一瞬間;
假死原因: 瀏覽器的渲染(UI)執行緒和js執行緒是互斥的,在執行js耗時操作時,頁面渲染會被阻塞掉。當我們執行非同步ajax的時候沒有問題,但當設定為同步請求時,其他的動作(ajax函式後面的程式碼,還有渲染執行緒)都會停止下來。即使我的DOM操作語句是在發起請求的前一句,這個同步請求也會“迅速”將UI執行緒阻塞,不給它執行的時間。這就是程式碼失效的原因;
解決辦法: 使用1.5版以後的jQuery,1.5版以後的jQuery引入了Deferred物件,用Deferred物件替代async:false;
程式碼如下:
var defer = $.Deferred();
$.ajax({
url : 'xxx',
//async : false,//原來設定的同步要註釋掉
success: function(backData){
defer.resolve(backData)
}
});
return defer.promise();