1. 程式人生 > >非同步方法淺談,以js post方法為例

非同步方法淺談,以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的應用,這個下次總結。