延迟以防止在地图上拖动多个ajax调用

Question

I'm making an ajax call every time the map is zoomed or dragged as follows:

function initialize(lat, lng) {
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 15,
   };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'zoom_changed', function() {
        getResults(map.getBounds());  
    });

    google.maps.event.addListener(map, 'dragend', function() {
        getResults(map.getBounds());  
    });

};

function getListings(bounds){
 data = {'South_Lat':bounds.getSouthWest().lat(), 'South_Lng':bounds.getSouthWest().lng(), 'North_Lat':bounds.getNorthEast().lat(), 'North_Lng':bounds.getNorthEast().lng()};

 $.ajax({
    type: "POST",
    dataType: 'json',
    url: "<?=$results_url;?>",
    data: data,
    success: function (json) {
        // do something
    }
});
}

However, sometimes users may keep on dragging or zooming while one call is already being processed. One example is when the user uses the mouse wheel it triggers the zoom_change on every zoom step.

To prevent overloading the server, I would like to add a 1 or 2 seconds delay to wait for further zooms or drags before executing the ajax.

How can I implement this here?

Answer 1

Use underscore debounce (or an equivalent in another library) and the idle event.

var debouncedLoad = _.debounce(getDataFromServer, 2000/*2 seconds*/);

google.maps.event.addListener(map, 'idle', function() {
    debouncedLoad();
});

For jquery there seems to be a plugin for this

Answer 2

It was a reported bug http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371 .

Is recommend to use the event "idle".

google.maps.event.addListener(map, 'idle', function() {
});