Ommadawn Ommadawn -4 years ago 96
Javascript Question

Disabling JS events

I'm using maps on my webpage and I have the following JS code:

map.on('zoomend', function() {
populate();
});


When i zoom over the map, the function populate() is called (it's used to put some markers on the map).

What I want is to disable the event 'zoomend' while populate is doing its stuff, so I would like something like this:

map.on('zoomend', function() {
// DISABLE ZOOMEND EVENT
populate();
// ENABLE ZOOMEND AGAIN
});


How could I do this?

Thank you!

EDIT: here is a piece of my function populate()

function populate() {
$.post('/LoadMarkersServlet', {
lat_min: map.getBounds().getNorthWest(),
lat_max: map.getBounds().getSouthEast(),
//more parameters
//...
}, function (responseText) {
if(responseText !== null) {
var p = JSON.parse(responseText);

for(var i=0; i<p.length; i++){
// here I read the responseText and put markers where it says
}
map.addLayer(markers);
}
});
}

Answer Source

This should work:

// name your event listener
map.on('zoomend', function handleZoomEnd() {
  // turn it off temporarily
  map.off('zoomend', handleZoomEnd);
  // pass a function to re-enable it after ajax completes
  populate(function () {
    map.on('zoomend', handleZoomEnd);
  });
});

// accept callback function as parameter
function populate(cb) {
    $.post('/LoadMarkersServlet', {
       lat_min: map.getBounds().getNorthWest(),
       lat_max: map.getBounds().getSouthEast(),
       //more parameters
       //...
    }, function (responseText) {
       if(responseText !== null) {
           var p = JSON.parse(responseText);

           for(var i=0; i<p.length; i++){
               // here I read the responseText and put markers where it says
           }
           map.addLayer(markers);

           // this re-enables zoomend callback
           cb();
       }
    });
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download