异步方法中对于$.Deferred()实际应用

本来很久之前就想写这个来着，可是后来赶着开发，还有自己懒，就没有写。今天需要用到deferred的时候还跑来翻翻自己的博文，没有找到还有点懵逼。所以今天用到了，而且达到了自己想要的效果了，想想还是记下来吧。

代码块用到的easyui的$.messager.progress

关于deferred的定义，我还不是很清楚，可以自行百度，我都是百度的。关于本文的应用，就是想达到：循环中的异步方法执行结束后，再调用我想调用的方法。

首先异步方法如下：

	function showPoint(mapPoint,warnTeller){
	    //关于$.Deferred()
		var d = $.Deferred();
		var url = CTX_PATH + "lgyj/transferRiskCount";
		$.post(url,warnTeller,function(data){
		 try{
// 				console.log(x,mapPoint);
				var latlng = new google.maps.LatLng(mapPoint.lat,mapPoint.lng); //点坐标
				var icon;
				//根据数据是否有异常设置图标
				if(data.total > 0){
					icon = '';
				}else{
					icon = '';
				}
				//新建marker点
				var marker = new google.maps.Marker({
						position: latlng,
						map: map,
						draggable:false,//禁止拖拽
						title:mapPoint.org_name,
						icon:icon,
						org_id:mapPoint.org_id
				}); 
// 				console.log(marker);
				//站点信息窗口
				var currInfowindow = new google.maps.InfoWindow({
// 						content : getPointHtml(mapPoint.org_id),
						size : new google.maps.Size(210,90)
				});
				//添加点事件
				google.maps.event.addListener(marker, 'click', function(event) {
					var url = CTX_PATH + "lgyj/transferRiskQuery";
					var warnTeller={};
					warnTeller.org_id=this.org_id;
					//查询数据并放在弹出窗口上
					$.post(url,warnTeller,function(result){
						var html = "
";
						if(result.length > 0){
							var num = 0; 
							html = ""
							for(var i =0 ; i"
							}
							html +="
姓名
柜员号
应轮岗日期
"+result[i].tlr_id+"
"
								+result[i].deadline_date_str+"
"
						}else{
							html += "提示! 不存在未轮岗风险人员！"
						}
						html += "
";
						clearAllInfoWindow();
						currInfowindow.setContent(html);
						currInfowindow.open(map,marker);
						currInfowindow.setZIndex(1000);
						infowindows.push(currInfowindow);
					},'json');
					});
			}catch(e){
				console.log(e);
        	}finally{
				d.resolve();
        	}
		},'json');
		
		return d;
	}

当然上面的异步方法里面还套着一个异步方法，我然而循环的异步方法就是第一层的$.post方法。

然后新建一个deferreds数组，然后把调用方法return的deferred塞进数组里，最后在循环结束后，在所有异步方法执行完成后调用我想调用的方法。如下面代码：

	window.onload = function(){
// 		$.messager.alert("警告","申请通过的数据不可编辑")
// 	 	$( "#progressbar" ).progressbar({
//       		value: false
//     	});
	 	
		//初始化map
	 	initialize('map_canvas',def_zoom,lat,lng);
	 	
	 	var mapPoints=${mapPointsJson};
	 	if(mapPoints != null)
	 	{
	 		//进度条弹出 easyui
	 		$.messager.progress({
        		title:'营业点加载中,请等待',
        		msg:'加载中...',
    		});
    		//新建deferred数组
    		var deferreds = [];
	 		for(x in mapPoints){
				//人员数量
				var warnTeller={};
				warnTeller.org_id=mapPoints[x].org_id;
				var mapPoint=mapPoints[x];
				//显示marker
				var dp = showPoint(mapPoint,warnTeller);
				deferreds.push(dp);	
			}
			//在所有异步方法执行完后关闭进度条
			$.when.apply($, deferreds).done(function(){
    			$.messager.progress("close");
    		}).fail(function(){
    			alert("wocaotainanleba");
    		});
			//循环解除，关闭
// 			$.messager.progress("close");
	 	}
		google.maps.event.addListener(map,'click',function(event){
			//清理marker的浮窗
			clearAllInfoWindow();
			//限制地图显示的层级
			if (map.getZoom() > 15){
				map.setZoom(15);
			} 
			if (map.getZoom() < 7){
				map.setZoom(7);
			}
		});
	}