Controlling speed of loop processing

Question

Here is problem, I have some java code that runs on a server and every 60seconds selects 60seconds worth of data, constructs an object out of each one and then adds it to a list.

Now on the client side i have some javascript that calls a methods on the server and returns this list of object. these objects each represents a image that needs to move to a certain location on the screen.

Now here comes the problem im currently facing. I have about 60seconds to loop through these objects and animate the image to the right location. Now when I try loop through it almost does the loop instantly and all the images just appears at the starting location. What this tells me is the function i call to do the animation doesn't get time to complete as another call to that function is interrupting it.

How does one go about controlling this so that no matter what the size I always finish the list in 60seconds?

ps... I have tried setTimeout to no avail procedural client side really not my stronger side

As Requested, the json that is received is an array of objects

function dataServer() {
          $.getJSON("/service/data/message", function(data) {
                if(data) {
                    msgs = data;
                            check = true;
                            counter = 0;
                            var total = data.length;
                            waitTime = (60000 / total) - (8 * delay);
                            for(var message in data) {
                                var latLng = new google.maps.LatLng(-54.75, 148);
                                var marker = new google.maps.Marker({
                                                                    position: latLng,
                                                                    map: map,
                                                                    optimized: true,
                                                                    icon: new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(85, 60))
                                                                    });
                                position = [-55, 148];
                                result = [ data[message].x, data[message].y ];
                                i = 0;
                                deltaLat = (result[0] - position[0])/numDeltas;
                                deltaLng = (result[1] - position[1])/numDeltas;
                                var w = 85;
                                var h = 60;
                                var shrinkW = w / 2;
                                var shrinkH = h /2;
                                var shrinkDeltaW = shrinkW / numDeltas;
                                var shrinkDeltaH = shrinkH / numDeltas;
                                var deltaW = w / numDeltas;
                                var deltaH = h / numDeltas;
                                var toSet = true;

                                function moveMarker(result){
                                    position[0] += deltaLat;
                                    position[1] += deltaLng;

                                    if(i % 4 == 0) {                    
                                        w -= deltaW;
                                        h -= deltaH;
                                    }

                                    var latlng = new google.maps.LatLng(position[0], position[1]);
                                    marker.setPosition(latlng);
                                    marker.setIcon(new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(w, h)));

                                    if(i == (numDeltas - 1)) {
                                        var latlng = new google.maps.LatLng(data[message].x, data[message].y);
                                        marker.setPosition(latlng);
                                        i++;
                                    }

                                    if(i!=numDeltas){
                                        i++;
                                        if(markerArray.length > 10) {
                                            shrinkW -= shrinkDeltaW;
                                            shrinkH -= shrinkDeltaH;
                                            markerArray[0].setIcon(new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(shrinkW, shrinkH)));
                                            if(i == (numDeltas -1)) {
                                                markerArray[0].setIcon(new google.maps.MarkerImage( image , undefined, undefined, undefined, new google.maps.Size(85, 60)));
                                                markerArray[0].setMap(null);
                                                markerArray.splice(markerArray[0], 1);
                                                feature = map.data.getFeatureById(dataArray[0].countryCode);
                                                if (feature) {
                                                    feature.setProperty('colour', dataArray[0].opacity);
                                                } else {
                                                }
                                                dataArray.splice(dataArray[0], 1);
                                            }

                                        }
                                        delay = waitTime / 8;
                                        setTimeout(moveMarker, delay);
                                    } 

                                }

                                moveMarker(result);

                                markerArray.push(marker);
                                dataArray.push(data[message]);


                            }


                } else {


                    dataServer();
                }


          }); 

        if(check == false) {
            counter++;
            if(counter == 100) {
                window.location.href = "/intermission.htm";
            }   
        }

        check = false;
    }

[Put a Delay in Javascript](http://stackoverflow.com/questions/1183872/put-a-delay-in-javascript)?? — huMpty duMpty, May 09 '14 at 10:32
I am currently using setTimeout on a couple of places. Let me clarify bait better, I have a get request on a loop that runs every 60 seconds. This populates a list of objects, I then get the length of the list and divide by 60sec to get the required delay and then loop over the list putting the delay time as a timeout. yet the delay isn't happening as every item in the list seems to appear almost at the same time. — Ernie, May 09 '14 at 10:39

score 0 · Answer 1 · answered May 09 '14 at 10:35

0

You can use setInterval() like you said and then break the loop when this interval expires. Like:

var stop = false,
    interval = setInterval(function(){
        stop = true;
    }, 60000);

var items = []; // your list.
for(var i=0, y=items.length; i<y; i++){
    // Do stuff

    if(stop){ break; }
}

answered May 09 '14 at 10:35

Bas Slagter

9,831
7
47
78

With the interval set it does pause, yet for some reason only one of the items in the list of 161 appears on the screen. Its like the javascript runs over the loop to fast and then only displays the last item in the list. – Ernie May 09 '14 at 12:48
I think you need to add some example code to make things more clear. – Bas Slagter May 09 '14 at 13:19

Controlling speed of loop processing

As Requested, the json that is received is an array of objects

1 Answers1