Javascript Multiple Asynchronous setInterval

Question

I'm trying to write code to track real-time positions of roughly 100 vehicles via GPS. I'd like to smoothly "animate" the google map marker for each vehicle by setting its position along an interpolated path between its last X/Y point and the current one. I call the URL to get a JSON object with all the current vehicle positions every 15 sec via a setInterval call. Inside that I iterate over each vehicle in the JSON object and set the vehicle position. I have functions to animate the motion but it only works reliably for one vehicle, I believe because my nested setInterval function will not complete before the next step in the for loop it's enclosed in. Is there anyway to have the inner setInterval function run to completion before the next "i" in my for loop?

setInterval(function() {
   $(document).ready(function() {
      $.getJSON("http://localhost:8080/portal/frfeed/query/tampa_sw/paraVehicle?r=" + Math.random(),function(vehicles){
          $.each(vehicles, function(index, d){ 

             if(d.heading>=0 && d.heading<22.5) direction="NORTH";
             else if(d.heading>=22.5 && d.heading<67.5) direction="NORTHEAST";
             else if(d.heading>=67.5 && d.heading<112.5) direction="EAST";
             else if(d.heading>=112.5 && d.heading<157.5) direction="SOUTHEAST";
             else if(d.heading>=157.5 && d.heading<202.5) direction="SOUTH";
             else if(d.heading>=202.5 && d.heading<247.5) direction="SOUTHWEST";
             else if(d.heading>=247.5 && d.heading<292.5) direction="WEST";
             else if(d.heading>=292.5 && d.heading<338) direction="NORTHWEST";
             else direction="NORTH";
             vehicle = "";

              for (var i=0; i<vMarkers.length; i++) {
                  if( vMarkers[i][0] === d.internalVehicleId ) {
                      var path; 
                      var latlng = new google.maps.LatLng(d.latitude,d.longitude);
                      vMarkers[i][2] = vMarkers[i][1].getPosition().lat();
                      vMarkers[i][3] = vMarkers[i][1].getPosition().lng();
                      vMarkers[i][4] = latlng;
                      vMarkers[i][1].setTitle('Vehicle: ' + d.internalVehicleId + '\r\n' + 'Last Update: ' + d.time + '\r\n' + 'Traveling: ' + direction + ' @ ' + d.speed + ' mph');
                      path = vPolys[i][1].getPath();
                      path.push(latlng);
                      vPolys[i][1].setPath(path);
                      vehicle = vMarkers[i][0];

                      var lat = vMarkers[i][2];
                      var lng = vMarkers[i][3];
                      var latlngTo = vMarkers[i][4];
                      var latLngFrom = new google.maps.LatLng(lat,lng);                            
                      j = 0;
// function below only works correctly if filtered for one vehicle as below, otherwise, all
// markers randomly move and don't stop due to the setInterval being called inside the for loop

                      if (distance(latlngTo.lat(), latlngTo.lng(),latLngFrom.lat(), latLngFrom.lng()) > 20 && vMarkers[i][0] == "1329") {
                           iv = window.setInterval(function() { 
                               j++;
                               var pos = mercatorInterpolate(map, latLngFrom, latlngTo, j/50);
                               vMarkers[i][1].setPosition(pos);
                               if (j >= 50) {
                                    window.clearInterval(iv);
                                        }
                                    }, 20);
                                }
                                else {
                                    vMarkers[i][1].setPosition(latlngTo);
                                };

                                break;
                            }
                        }
                        if( vehicle == "") {
                            color = get_random_color();
                            marker = new StyledMarker({
                                styleIcon:new StyledIcon(StyledIconTypes.BUBBLE,{color:color, fore: "ffffff",text: d.internalVehicleId}),
                                position: new google.maps.LatLng(d.latitude,d.longitude),
                                title:    'Vehicle: ' + d.internalVehicleId + '\r\n' + 'Last Update: ' + d.time + '\r\n' + 'Traveling: ' + direction + ' @ ' + d.speed + ' mph',
                                map: map
                            });
                            var polyOptions = {
                                strokeColor: color,
                                strokeOpacity: 1.0,
                                map: map,
                                strokeWeight: 3
                            };                                
                            poly = new google.maps.Polyline(polyOptions);
                            var latlng = new google.maps.LatLng(d.latitude,d.longitude);
                            vMarkers.push([d.internalVehicleId, marker, d.latitude, d.longitude, latlng]);
                            var path = poly.getPath();
                            path.push(latlng);
                            poly.setPath(path);
                            vPolys.push([d.internalVehicleId, poly])
                            vehicle = "";
                        }
                    });//$.each(vehicles, function(index, d){

                    function mercatorInterpolate(map, latLngFrom, latLngTo, fraction) {
                        // Get projected points
                        var projection = map.getProjection();
                        var pointFrom = projection.fromLatLngToPoint(latLngFrom);
                        var pointTo = projection.fromLatLngToPoint(latLngTo);
                        // Adjust for lines that cross the 180 meridian
                        if (Math.abs(pointTo.x - pointFrom.x) > 128) {
                            if (pointTo.x > pointFrom.x)
                                pointTo.x -= 256;
                            else
                                pointTo.x += 256;
                        }
                        // Calculate point between
                        var x = pointFrom.x + (pointTo.x - pointFrom.x) * fraction;
                        var y = pointFrom.y + (pointTo.y - pointFrom.y) * fraction;
                        var pointBetween = new google.maps.Point(x, y);
                        // Project back to lat/lng
                        var latLngBetween = projection.fromPointToLatLng(pointBetween);
                        return latLngBetween;
                    }

                    function distance(lat1,lon1,lat2,lon2) {
                        var R = 6371;
                        var dLat = (lat2-lat1) * Math.PI / 180;
                        var dLon = (lon2-lon1) * Math.PI / 180; 
                        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
                            Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
                            Math.sin(dLon/2) * Math.sin(dLon/2); 
                        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
                        var d = R * c;
                        return Math.abs(d*1000);
                    }
                }); //$.getJSON(...., function(vehicles) {
            }); //$(document).ready(function() {
        }, 16000); // setInterval(function(){

Answer 1

No, setInterval is Asynchronous. You have to program in a way that works with asycronous code, rather then trying to force it to be synchronous.

For animation you should really be using requestAnimationFrame to get smooth results.

I would create a frames array, pushing an array of the cars every 15 seconds. Each car storing it's position

var frames = [[{x: 10, y:2},{x: 5, y:6}], [{x: 12, y:4},{x: 7, y:8}]]

I would then use requestAnimationFrame and interpolate the current position of each car

var currentFrame = 0;
var startTime = 0;

function update(){
   var currentTime = newDate();
   startTime || startTime = currentTime;

   var elaspedTime = Math.floor(currentTime.getTime() - startTime.getTime())/1000;

   // increment the current frame if 15 seconds have elapsed
   elaspedTime%15 === 0 && currentFrame++;

   // Get the current frame
   var frame = frames[currentFrame],
       nextFrame = frames[++currentFrame];

   // Loop over each car in the frame
   for(var i = 0; i < frame.length; i++){
     // Calculate the difference in location
     var xDiff = nextFrame[i].x - frame[i].x;
     var yDiff = nextFrame[i].y - frame[i].y;

     // interpolate the current position of the cars
     var xPos = xDiff / elaspedTime%15;
     var yPos = yDiff / elaspedTime%15;

     // do some work here to set the position of the cars
   }

   requestAnimationFrame(update);
}

requestAnimationFrame(update);

You could optimize this much better then what I've done, but this is how I'd approach it.

Answer 2

Instead of trying to run multiple setInterval(), run just one, and iterate over all your vehicles within that one function call.

For example:

iv = setInterval(function() {
  for (int i=0; i<vehicleArray.length;i++) {
     // Do stuff for each vehicle.
  }
}, 40);

Note that setInterval() doesn't guarantee the frequency at which it will be called, just the minumum interval. This can lead to haphazard tracking. Avoid this by reading the clock every time you enter the setInterval() function, and calculating new positions based on that.

Your code is trying to achieve 50 frames per second, which might prove to be optimistic. You can get a smooth effect at half that. i.e. at 40ms intervals.