Map idle event

I’m posting this partly for confirmation that I’ve done it right and partly in case anyone else may need it in future or even if it is something that could/should be added to leaflet.

I was having trouble with moveend or dragend zoomend calling the results function too soon which prevented the user from being able to do more than a single move (drag or zoom) at once (unless they were quick) before it would want to run the function so, taking inspiration from google maps, I’ve tried to replicate the idea of the idle event. Rather than run the function directly on moveend or dragend zoomend it allows me to wait for user interaction to stop (500ms since last movement in this case) before running the function.

// declare timeout function name
var timeoutHandler;
...
// initialize map as normal
var map = L.map('map_canvas', {
  ...
});
// add event listener to map for movement
map.on('zoomend dragend', mapMoveHandler);
map.on('idle', mapIdleHandler);
...
function mapMoveHandler() {
  // cancel any timeout currently running
  window.clearTimeout(timeoutHandler);
  // create new timeout to fire idle event after 500ms (or whatever you like)
  timeoutHandler = window.setTimeout(function() {
    map.fire('idle');
  }, 500);
}
...
function mapIdleHandler() {
  // run some function when map idle to get results or update markers or something
  ...
}

[wololodev]

with lodash.js, this is an exact replacement:

map.on('moveend', _.debounce(function() {
   console.log("waow");
}, 1000));

[amnesia7]

@GertS I found that for best results I had to cover all possible drag (and zoom in my case) listeners dragstart drag dragend zoomstart zoomanim zoomend for my mapMoveHandler function.