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;
}