CODEWITHSUNDEEP
javascriptleaflet
mehany
mehany

Reputation: 4187

How to stop pending ajax requests?

I am trying to stop pending ajax requests when a certain action happen on a LeafletJS map. Here is exactly what I am doing, I have a map ( that uses LeafletJS ) which queries a WMS service, when a user pan, zoom, or query a new layer, the previously queued ajax requests continue to wait for a response.

The idea is to process only the requests that would serve the current map view criteria and cancel everything else. The reason I am trying to achieve this is to improve the performance and the speed of rendering of the current action and ignore all previous actions.

I feel like this is more of a Javascript question than a leafletJS specific question so I looked into abort() but i am not sure how to apply it with LeafletJS

Edited: Here is the code I currently have to query the WMS service ( The service is private )

$scope.makeWMSLayer = function (layerInfo) {

            if (layerInfo == null)
                return false;

            var uri = apiUrl+"/WMSService/";
            var options = {
                layers: layerInfo.Name,
                maxZoom: layerInfo.maxZoom || 20,
                minZoom: layerInfo.minZoom || 11 ,
                format: 'image/jpeg',
                transparent: true
            };
            var layer = L.tileLayer.wms(uri, options);

            layer.on({
                load: function () { self.layersLoading[layerInfo.Name] = false; digest(); },
                loading: function () { self.layersLoading[layerInfo.Name] = true; digest(); }
            });

/*keep current active layer inside a $rootScope variable*/
            $rootScope.activeLayer = layer;

            return layer;
        };

Upvotes: 0

Views: 2336

Answers (1)

Victor - Reinstate Monica
Victor - Reinstate Monica

Reputation: 1280

If you are using jQuery for getting JSON data, you should use $.ajax instead of others (like $.getJSON etc.), and store it as a value.

Like

var jqXHR = $.ajax({ [...] }, [...]);

then just abort it:

jqXHR.abort();

EDIT:

TileLayer does not provide any ajax requests. It's simply assigning a "src" attribute for tiles.

Unless you want to implement your own asynchronous (pre)loading by e.g. extending TileLayer, window.stop() is your only go.

Upvotes: 1

Related Questions