I have this question: how to optimize my ajax requests in jquery?
I have an application that uses the api of google maps, and in this to show the markers on the screen I use jquery to perform the ajax requests, follow my request code:
function toggleLayers(indexCamada, check)
{
if (check.checked) {
//$.get('arquivo.asp')
$.ajax({
type: "GET",
dataType: "json",
timeout: 20000,
url: "camadas_nivel1.json",
contentType: "application/json;charset=UTF-8",
cache: true
}).done(function(camadas, textStatus, jqXHR) {
$.each(camadas, function(index, camada) {
if (indexCamada == camada.index) {
$.each(camada.coordenadas, function(index, coordenada) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(coordenada.latitude, coordenada.longitude),
title: coordenada.title,
map: map,
});
if (coordenada.icon) {
marker.setIcon(coordenada.icon);
}
var c = coordenada['info_window'] ? coordenada['info_window'].join("\n") : "";
if (c !== "") {
var infowindow = new google.maps.InfoWindow({
content: c
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
$('.single-item').slick({
lazyLoad: 'ondemand',
slidesToShow: 1,
slidesToScroll: 1
});
});
}
markers.push([camada.index,marker]);
console.log(indexCamada);
});
}
});
}).fail(function(camadas, textStatus, jqXHR) {
console.log(camadas + " " + textStatus);
})
} else {
for (i = markers.length - 1; i >= 0; i--) {
var indexTmp = markers[i][0];
var marker = markers[i][1];
if (indexCamada == indexTmp ) {
marker.setMap(null);
markers.splice(i, 1);
}
}
console.log(markers);
}
}
Imagine the screen you have map of google maps loaded left on a div and several checks on the right side of the screen for user selection, as it selects a check the markers are shown, then the face script checks to see if the check was checked if yes do the ajax request in the json file, but I remove the markers if the case was rendered on the screen. My questions are:
1 - How do I optimize my requests with large amounts of markers for example 10,000 and etc. Is there a performance loss I loading all around and sweeping every file using jquery in this way?
2 - will your pass parameters in the request for an * .asp file, and this build the json file dynamically for specific request has decreased query time and scan, eg:
$.getJSON("arquivo.asp",{id:1},function(camadas){
//varrendo arquivo
$.each(camadas,function(index,camada){
})
})
This is a personal thank you if someone helps me