异步方法浅谈，以js post方法为例

惭愧的是，工作将近三年，竟然对异步方法理解为零。看书真的没用，实践出真知。

首先，看下面的代码，根据后台给的数据判断谷歌地图的图标是红色还是绿色。

		for(x in mapPoints){
			var mapPoint=mapPoints[x];
	 	  
			var latlng = new google.maps.LatLng(mapPoint.lat,mapPoint.lng); //点坐标
	 	  
			var url = CTX_PATH + "lgyj/transferRiskCount";
			//人员数量
			//deferred
			var warnTeller={};
			warnTeller.org_id=mapPoints[x].org_id;
			$.post(url,warnTeller,function(data){
					var icon;
					if(data.total > 0){
						icon = '<spring:url value="/resources/map/images/icons/red.png" />';
					}else{
						icon = '<spring:url value="/resources/map/images/icons/green.png" />';
					}
					//新建marker点
					var marker = new google.maps.Marker({
							position: latlng,
							map: map,
							draggable:false,//禁止拖拽
							title:mapPoint.org_name,
							icon:icon,
							org_id:mapPoint.org_id
					}); 
						
					//站点信息窗口
					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) {
						currInfowindow.setContent(getPointHtml(this.org_id));
						currInfowindow.open(map,this);
						currInfowindow.setZIndex(1000);
// 						infowindows.push(currInfowindow);
						currPoint = this;
						});
			},'json');
		}

这一串代码有问题，问题就是最后只建了一个marker，本来经同事指导是可能是由于引用了公用的变量，结果发现不是。

这里的问题是，这是个异步方法，异步方法就是你不知道他什么时候会完成。而在这里，他等到循环结束后才去执行。所以导致执行的时候一个变量。

这个其实很简单，只是我真的没有想到，我需要做的就是把这个方法放在一个方法里面，然后循环调用。如下：

	 	for(x in mapPoints){
			//人员数量
			var warnTeller={};
			warnTeller.org_id=mapPoints[x].org_id;
			var mapPoint=mapPoints[x];
			showPoint(mapPoint,warnTeller);

		}

	function showPoint(mapPoint,warnTeller){
		var url = CTX_PATH + "lgyj/transferRiskCount";
		$.post(url,warnTeller,function(data){
		
		
			
			console.log(x,mapPoint);
			var latlng = new google.maps.LatLng(mapPoint.lat,mapPoint.lng); //点坐标
			var icon;
			if(data.total > 0){
				icon = '<spring:url value="/resources/map/images/icons/red.png" />';
			}else{
				icon = '<spring:url value="/resources/map/images/icons/green.png" />';
			}
			//新建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) {
				currInfowindow.setContent(getPointHtml(this.org_id));
				currInfowindow.open(map,this);
				currInfowindow.setZIndex(1000);
// 				infowindows.push(currInfowindow);
				console.log(this);
				});
		},'json');
	}

文章中这个代码是简单的地图展示marker的代码片段，最重要的是这个关于异步的方法。

异步方法取值还有Deferred的应用，这个下次总结。