How to delay individual ajax requests (geocoder floading)

Hi!

I’ve got a problem I can’t figure out. On our page we need to decode a bunch of addressess with the google maps geocoder. Offcourse the number of requests is limited per day, but also there’s a limit per second.
The function I’ve got works until the 6th request, afterwards you get the error OVER_QUERY_LIMI.

For every address that’s not in the database a span tag with class “getAddress” is added. The script in the end does this:


    $("span.getaddress").each(function(e) {
        var hash = $(this).attr('hash'); // get hash from element
        var startStop = $(this).hasClass('startaddress') ? "start" : "stop";  // is it a start or stop address

        $.getJSON('/json/tracks/view/' + hash, function(data) {  // get data from the server

            if (data == "") {
            	$('#' + startStop + '_' + hash).html('no data'); // on track failure, there are no segments or points.
            } else {
            var segments = data.gpx[0].trk.trkseg;
            var point = (startStop == "start" ? segments[0].trkpt[0] : segments.pop().trkpt.pop());  // first or last point in track
            var latlng = new google.maps.LatLng(point.lat,point.lon);
            geocoder.geocode({'latLng': latlng}, function(results, status) {
                console.log(status);
                if (status == google.maps.GeocoderStatus.OK) {  // if succesfull, save the address
                    $.ajax({
                        url: '/json/tracks/saveaddress/' + hash + '/' + startStop,
                        type: "POST",
                        data: {'results': JSON.stringify({'results': results})},
                        dataType: 'json',
                        success: function(data) {
                            $('#' + startStop + '_' + hash).html(data.locality);
                        }
                    });
                }
            });

           }

        });
    });

Problem is that the function each is not really iterative. It instantly adds like 50 $getJSON requests to our server (not very nice, but no problem) but they all get done in nearly the same time, so there are also 50 requests for the geocoder in nearly the same second. Adding anykind of delay in the script doesn’t work because each is not iterative, it just forks for every element.

How can I solve this? Should I first build up a ajax que and then process every element with a delay? Any ideas or example code will be very welcome.

I think the problem is a bit complex because the first getJSON is a ajax request and I want to space-out the geocode requests that follow thereafter.

I think I’m going to add all the results of the getJSON’s made by the .each function to some kind of a stack and then make a separate function that periodically checks of there are elements in the stack and if so does the rest of the needed processing (calling the geocoder and sending the result back to be saved)

I’m not sure if this is a good idea or how to set it up. Like to hear your thoughts.