0

Tenho essa seguinte questão: como otimizar minhas requisições ajax em jquery?

Tenho uma aplicação que utiliza a api do google maps, e nesta para mostrar os marcadores na tela eu utilizo jquery para realizar as requisições em ajax, segue meu código de requisição:

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);

                    }
                }

Imaginemos a tela você tem mapa do google maps carregado a esquerda em um div e varios checks ao lado direito da tela para seleção do usuario, a medida que ele seleciona um check é mostrado os marcadores, então o script de cara verifica se o check foi marcado se sim faço a requisição em ajax no arquivo json, senao eu removo os marcadores se caso foi renderizado na tela. As minhas perguntas são:

1 - como faço para otimizar minhas requisições com grande quantidades de marcadores por exemplo 10.000 e etc, há perca de performance eu carregando todo e varrendo todo arquivo usando jquery desta forma?

2 - será que seu passar parametros na requisicao para um arquivo *.asp , e este construir o arquivo json dinamicamente para solicitação especifica diminiu o tempo de consulta e varredura, exemplo:

  $.getJSON("arquivo.asp",{id:1},function(camadas){
    //varrendo arquivo
    $.each(camadas,function(index,camada){

    })
  })

é isso pessoal desde já agradeço se alguem me ajudar

2
  • 1
    Seguem algumas dicas simples: Quebre seu código em mais funções para facilitar a leitura e manutenção. Deixe as funções pequenas para o fácil entendimento documente suas funções Logo se você precisar fazer um debug para medir performance funções "nomeadas" são mais fáceis de identificar. Commented 25/03/2015 às 2:11
  • Obrigado #Luan Fagundes vou rever meu codigo e fazer estes ajustes Commented 25/03/2015 às 13:15

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .