Ajax同步請求出現瀏覽器頁面假死,阻塞UI線程之解決方案

 ajax 請求數據之前,數據經過複雜處理需要一些時間,瀏覽器提示當前頁面沒響應,是否等待或者結束程序。

function loadData()
{ 

 //--------------------第一步                    
 $.ajax({
    url:'${ctx}/EP/getExamType.do', 
	async:false,  ////--------------------第二步
	type:"post", 
	beforeSend:function(){
		 $("#loading").css("display","");
		 $("#loadingsrc").css("display","");
     },
	success:function(data){
		    	
	    //--------------------第三步
		data =eval('(' + data + ')'); 
		    	 
		//ajax返回成功,清除loading圖標
		$("#loading").css("display","none");
	    $("#loadingsrc").css("display","none");; 
    } 
 });   
 //--------------------第四部

}

處理方法,對應上圖中的步驟

解決辦法:

第一步  加上      var defer = new jQuery.Deferred();

第二步  註釋掉  async(或者刪除)

第三步  加上     defer.resolve(result);

第四步  加上     return defer;

function  loadDate()
{
    var defer = new jQuery.Deferred();
	 	//統計圖一餅裝圖
	$.ajax({
		    url:'${ctx}/EP/getExamType.do', 
		   // async:false, 
		    type:"post", 
		    beforeSend:function(){
		    	 $("#loading").css("display","");
		         $("#loadingsrc").css("display","");
            },
		    success:function(data){
		    	
		    	defer.resolve(data);
		        data =eval('(' + data + ')'); 
		    	 
		    	//ajax返回成功,清除loading圖標
		    	$("#loading").css("display","none");
	            $("#loadingsrc").css("display","none");; 
		    } 
		});   
    return defer;
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章