php - Javascript Ajax 页面在一段时间后开始响应缓慢？

Question

我有一个 JavaScript ajax 页面，它每 20 秒触发一次 ajax 请求(使用 setInterval 函数)并获得 JSON 格式的响应。在页面中；使用 JSON 响应 我在 Google map 上显示标记(使用 API v3)并根据从 ajax 响应接收到的位置每 20 秒更新一次。我在标记的点击事件上显示一个 infoWindow。

我使用 PHP 作为服务器端脚本，它通过执行一些数据库调用生成我的 ajax 响应。

当我打开页面时一切正常。但是慢慢地页面开始响应缓慢。我的意思是，当我单击标记或相关文本时，页面会花费大量时间来定位标记、加载 map 和打开 infoWindow。随着时间的流逝，页面的速度越来越慢。如果我刷新页面，一切都会再次开始正常工作。

该页面在任何时候都不会显示一个错误，我必须补充一点，标记位置的自动更新在页面的整个生命周期内都可以正常工作。

我已经尝试了在论坛上找到的所有内容。比如，我已经从 xml(dom) 响应转移到 json 响应。我已经尝试更改 XMLHttpRequest 方法，因为 GET 请求倾向于自动缓存数据。但没有任何帮助。我完全不知道哪里出了问题，我在我的代码中做了什么。

这是我的 JavaScript 代码:

    <script type="text/javascript">
    var map;
var contentString = "";
var infoWindow = new google.maps.InfoWindow({content: contentString});
var url = "genAjaxResponse.php?id=<?php echo $id; ?>";
var marker;
var gmarkers = new Array();
var icon;

var lastClickedMarker;
var stImgId;

var customIcons = {
  Moving: {
    icon: 'icons/abc.png'
  },
  Idle: {
    icon: 'icons/xyz.png'
  },
  Parked: {
    icon: 'icons/pqr.png'
  },
  Alert: {
    icon: 'icons/wxy.png'
  }
};

function load() {  // to be called on onload event of body
  map = new google.maps.Map(document.getElementById("map"), {           
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true,
        center:new google.maps.LatLng(15.570128,78.957092)
  });


  calldownloadUrl(url,map,infoWindow);

  directionsDisplay = new google.maps.DirectionsRenderer();
}

function calldownloadUrl(url,map,infoWindow) {
    downloadUrl(url,displayMarker,map,infoWindow);  
}

function displayMarker(data,map,infoWindow) {

    function generateTriggerCallback(object, eventType) {
        return function() {
            google.maps.event.trigger(object, eventType);
        };
    }

var namearr = Array();
    var json = data.responseText;
    var vehicles = eval ("(" + json + ")");

    var i = 0;
    for (var veh in vehicles)
    {
    var tag = vehicles[veh];            
    var veh_no = tag["veh_no"];
        var is_stale = tag["is_stale"];
        var ignition_off = tag["ignition_off"];
        var speed = tag["speed"];
        var lat = tag["lat"];
        var lng = tag["lng"];
        var time = tag["time_stamp"];
        var address = tag["address"];

        var point = new google.maps.LatLng(
            parseFloat(lat),
            parseFloat(lng));
        var type;                 
        var status;

        stImgId = i+1;
        if(ignition_off == 0 && speed > 3) {
            type = "Moving";
            status = type + "(" + speed + " Kmph)"; 
            document.getElementById("img"+stImgId).src = "icons/greenalert2.png";
        }
        else {
            if(ignition_off == 1) {
                type = "Parked";
                status = type;
                document.getElementById("img"+stImgId).src = "icons/greyalert2.png";
            }
            else {
                type = "Idle";
                status = type;
                document.getElementById("img"+stImgId).src = "icons/yellowalert2.png";
            }
        }
        if(is_stale == 1) {
            type = "Alert";
            status = type;
            document.getElementById("img"+stImgId).src = "icons/redalert2.png";
        }                 

        infoWindow.close();

        var icon = customIcons[type] || {};         
        if(typeof gmarkers[i] != 'undefined') { 
            gmarkers[i].setPosition(point); 
            gmarkers[i].setIcon(icon.icon);
            if(gmarkers[i].id == lastClickedMarker)  {
                if(map.getBounds().contains(gmarkers[i].getPosition()) === false)
                    map.setCenter(gmarkers[i].getPosition());
            }                   
        }
        else
        { 
            gmarkers[i] = new google.maps.Marker({ 
                    id: i,
                    position: point,
                    icon: icon.icon,
                    title: veh_no,
                    map: map
            }); 
        }
        var html = "<span><p><b>"+veh_no +"</b></p> <p>Address: "+address+"<br />Status: "+status+"<br />Time: "+time+"</p></span>";

        namearr[i] = "<span><p><b>"+veh_no +"</b></p> <p>Address: "+address+"<br />Status: "+status+"<br />Time: "+time+"</p></span>";

        // -- bind click event to texts (vehicle nos) -- //
        var textclick = document.getElementById(i);
        textclick.onclick = generateTriggerCallback(gmarkers[i],"click");
        // -- bind click event to markers -- //
        bindinfoWindow(gmarkers[i], map, infoWindow, namearr[i], icon);
        i++;
    }
}

function bindinfoWindow(marker, map, infoWindow, html, icon) {
  google.maps.event.addListener(marker, 'click', function() {       
    lastClickedMarker = marker.id;
    map.setCenter(marker.getPosition());
    if(map.zoom < 15)
        map.setZoom(15);        
    marker.setIcon(icon.icon);        
    marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);        
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback, map, infoWindow) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, map, infoWindow, request.status);
    }
  };

  request.open('GET', url, true);
  request.send();
}

function doNothing() {}

window.setInterval(function() {calldownloadUrl(url,map,infoWindow)},20000);
</script>

Answer 1

我有一个类似的应用程序，我也遇到过类似的行为。 就我而言，我每 30 秒更新一次标记数组(对于每个标记:位置、图标、监听器的内容)。

首先，我已经停止每次更新都创建一个新标记，我认为设置 markers[id].setMap(null); 并创建一个新标记就可以了，CG 将处理此问题。

然后我将代码更改为仅更新标记位置、图标和监听器，如下所示:

 this.markers[id].setPosition(new google.maps.LatLng(lat, lng));
 this.markers[id].setIcon(this.updateFlags(status, id));

 google.maps.event.addListener(this.markers[id], 'mouseover', function () {
     infoWindow.setContent(text);
     infoWindow.open(this.map, this);
 });

 google.maps.event.addListener(this.markers[id], 'click', function () {
     devices.selectDevice(index);
 });

这产生了更少消耗的内存，但仍然......

最后我编辑了这样的代码:

 this.markers[id].setPosition(new google.maps.LatLng(lat, lng));
 this.markers[id].setIcon(this.updateFlags(status, id));

 google.maps.event.clearListeners(this.markers[id], 'mouseover');
 google.maps.event.clearListeners(this.markers[id], 'click');

 google.maps.event.addListener(this.markers[id], 'mouseover', function () {
     infoWindow.setContent(text);
     infoWindow.open(this.map, this);
 });

 google.maps.event.addListener(this.markers[id], 'click', function () {
     devices.selectDevice(index);
 });

我已经在 Chrome 开发者工具 (F12) -> Profiler 和Take Heap Snapshot 中对其进行了测试。你会看到它是否长得太快。

因此在您的情况下，这意味着将此行添加为函数 bindinfoWindow() 的第一行:

google.maps.event.clearListeners(marker, 'click');