은 for 루프에서 동시에 jQuery 함수를 호출합니다.

Question

Google지도를 구현중인 웹 페이지에서 작업하고 있습니다. 지도에서 경로를 시작하려면 jQuery 함수를 호출하고 싶습니다. 나는 JSON을 사용하여 배열을 작성하고있다. startRoute 아래의 함수를 루프에서 호출하려고하지만 완료 후 (startRoute의 루프가 완료되지 않은 후) 함수를 호출하려고합니다.

이 startRoute 함수는 새로운 위도와 경도를 제공하며지도를 새로 고치지 않고 마지막 위치에서 새로운 현재 위치로 경로를 따라 애니메이션을 이동해야합니다 (TIA).

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 방법에 :

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

이처럼 루프를 수정할 수 있습니다

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

setTimeout 때문에 다른 스레드에서 메소드를 실행, 따라서 루프를 만들 것입니다 완료를 감지 할 수 없습니다. 루프를 차단하여 다음 경로 그리기를 실행하려면 동일한 스레드에서 실행해야합니다.