1. 程式人生 > >jQuery的Ajax同步頁面假死/卡頓 解決辦法

jQuery的Ajax同步頁面假死/卡頓 解決辦法

起因: 需求是日曆中選擇不同日期,請求一次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();