在for循環中同步調用jQuery函數

Question

我正在實施Google地圖的網頁上工作。 我想調用jQuery函數以在地圖上開始路線。 我正在使用JSON填充數組。 我想在循環中調用以下startRoute函數，但要在其完成之后（在startRoute完成后而不是循環中）。

這個startRoute函數提供了新的緯度和經度設置，我必須沿動畫路徑（例如實時跟蹤）將動畫從最后一個位置移動到新的當前位置，而無需刷新地圖，TIA。

  for (i = 1; i < RoutePointslength; ++i) {
      var CurrentLatLong = [];                                
      CurrentLatLong.push([data._DriverLocation[i].Latitude, data._DriverLocation[i].Longitude]); 
   localStorage["EndLatLong"] = null;
   localStorage["EndLatLong"] = JSON.stringify(CurrentLatLong[0]).replace('[', '').replace(']', '');          
      setTimeout(function() { 
        startRoute(); 
      }, 300); 
    }

 function startRoute() {
        polyline = null;
        poly2 = null;
        polyline = new google.maps.Polyline({
            path: [],
            strokeColor: 'green',
            strokeWeight: 3
        });
        poly2 = new google.maps.Polyline({
            path: [],
            strokeColor: 'green',
            strokeWeight: 3
        });
        // Create a renderer for directions and bind it to the map.
        var rendererOptions = {
            map: map,
            strokeColor: "#8b0013"
        };
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

        //var start = document.getElementById("start").value;
        var start_ = localStorage["StartLatLong"]; //initial lat,long
        var end_ = localStorage["EndLatLong"];
        var travelMode = google.maps.DirectionsTravelMode.DRIVING;
        localStorage["StartLatLong"] = null;
        localStorage["StartLatLong"] = end_;

        var request = {
            origin: start_,
            destination: end_,
            travelMode: travelMode
        };

        // Route the directions and pass the response to a
        // function to create markers for each step.
        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);

                var bounds = new google.maps.LatLngBounds();
                var route = response.routes[0];
                startLocation = new Object();
                endLocation = new Object();
                // For each route, display summary information.
                var path = response.routes[0].overview_path;
                var legs = response.routes[0].legs;
                for (i = 0; i < legs.length; i++) {
                    if (i === 0) {
                        startLocation.latlng = legs[i].start_location;
                        startLocation.address = legs[i].start_address;                        
                    }
                    endLocation.latlng = legs[i].end_location;
                    endLocation.address = legs[i].end_address;
                    var steps = legs[i].steps;
                    for (j = 0; j < steps.length; j++) {
                        var nextSegment = steps[j].path;
                        for (k = 0; k < nextSegment.length; k++) {
                            polyline.getPath().push(nextSegment[k]);
                            bounds.extend(nextSegment[k]);
                        }
                    }
                }  
                polyline.setMap(map);                    
                map.fitBounds(bounds);                   
                map.setZoom(18);                  
            }
        });
    }

Answer 1

您可以像這樣修改循環：

var mapIsMoving = false;
var CurrentLatLong = [];                                

google.maps.event.addListener(map, "idle", function() {
    mapIsMoving = false;
});

for(var i = 0 ; i < RoutePointsLength; i++){
    if(mapIsMoving){
       i--;
       continue;
    }
    CurrentLatLong.push([data._DriverLocation[i].Latitude, data._DriverLocation[i].Longitude]); 
    localStorage["EndLatLong"] = null;
    localStorage["EndLatLong"] = JSON.stringify(CurrentLatLong[0]).replace('[', '').replace(']', '');          
    // run the route     
    startRoute();      
}

並在startRoute方法上：

function startRoute() {
    mapIsMoving = true;
    polyline = null;
    poly2 = null;
...
...
...

因為setTimeout將使該方法在另一個線程中運行，因此循環無法檢測到它的完成。 您需要在同一線程上運行它以阻止循環執行下一個路線圖。