Question

In my application I listen to the Google Maps API ‘bounds_changed’ event to send an ajax request to update some div on the web page depending on the new boundaries of the map:

google.maps.event.addListener(map, 'bounds_changed', function() {
  // here goes an ajax call
}

The event ‘bounds_changed’ is fired with a high frequency when the user drag the map around. So much that there are too many ajax requests sent to the server.

Basically I would like to make the ajax call only after the user has stopped to move the map during some time period (for example 500ms). I am not very experienced with Javascript and tried to achieve this with setTimeout and clearTimeout but without success.

Any idea would be appreciated 🙂

Answer 1

Add a timeout, that runs your code 500ms after the event fires, each time the event fires clear the timeout and create a new one.

eg.

google.maps.event.addListener(map, 'bounds_changed', (function () {
    var timer;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(function() {
            // here goes an ajax call
        }, 500);
    }
}()));