非同步方法淺談,以js post方法為例
阿新 • • 發佈:2019-02-19
慚愧的是,工作將近三年,竟然對非同步方法理解為零。看書真的沒用,實踐出真知。
首先,看下面的程式碼,根據後臺給的資料判斷谷歌地圖的圖示是紅色還是綠色。
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的應用,這個下次總結。