JavaScript内存泄漏使用setInterval

Question

Im having trouble with my javascript application leaking memory. 我的javascript应用程序泄漏内存有问题。 I've looked up things online and I seem to have closed out any memory alocation in the setInterval loop by using the 我已经在线查找了一些内容，而且我似乎已经通过使用了在setInterval循环中关闭了任何内存位置

variableX = null

technique. 技术。 But the application is still leaking memory somehow, can anyone point out what might be causing this leak? 但是应用程序仍在以某种方式泄漏内存，任何人都可以指出可能导致此泄漏的原因吗？ Here is my code : 这是我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Simple markers</title>
  <style>
     html, body, #map-canvas {
     height: 100%;
     margin: 0px;
     padding: 0px
     }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script>

     function initialize() {
         var myLatlng = new google.maps.LatLng(43.46949, -80.54661);
         var lat = 0;
         var long = 0;
         var mapOptions = {
             zoom: 16,
             center: myLatlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
         }

         function loadXMLDoc() {
             var xhr;
             if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
                 xhr = new XMLHttpRequest();
             } else { // code for IE6, IE5
                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
             }
             xhr.open("GET", "coordinates.txt", true);
             xhr.onreadystatechange = function () {
                 if (this.readyState == 4) {
                     var textfileString = this.responseText;
                     var longLatString = textfileString.split(',');
                     lat = parseFloat(longLatString[0])
                     long = parseFloat(longLatString[1])
                     textfileString = null
                     longLatString = null
                 }
             }
             xhr.send();
             xhr = null
         }
         var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
         var marker = new google.maps.Marker({
             position: myLatlng,
             map: map,
             title: 'Hello World!'
         });
         setInterval(function () {
             loadXMLDoc()
             var newLatLng = new google.maps.LatLng(lat, long);
             marker.setPosition(newLatLng);
             newLatLng = null
         }, 16);
     }
     google.maps.event.addDomListener(window, 'load', initialize);

  </script>
</head>
<body>
  <div id="map-canvas"></div>
</body>
</html>

Answer 1

You're sending a new XMLHttpRequest without waiting for the old one to complete. 您正在发送新的XMLHttpRequest而无需等待旧的XMLHttpRequest完成。 If the response takes longer than 16 milliseconds to be received (which it probably will), the "request queue" will grow, causing a memory leak. 如果接收的响应时间超过16毫秒（可能会这样），“请求队列”将增加，从而导致内存泄漏。

Sending requests nonstop is a bad idea. 不间断地发送请求是个坏主意。 If you need a constant stream of coordinates, pack multiple coordinates into one response and send a new request only when your previous one has completed: 如果您需要一个恒定的坐标流，请将多个坐标打包到一个响应中，并仅在前一个请求完成时发送新请求：

function getCoordinates() {
    ...
    xhr.onreadystatechange = function() {
        ...
        setTimeout(getCoordinates, 30000);
    }
}

Better yet, use Websockets. 更好的是，使用Websockets。

JavaScript内存泄漏使用setInterval

问题描述

1 个解决方案

解决方案1
3 2014-01-18 23:08:43

JavaScript内存泄漏使用setInterval

问题描述

1 个解决方案

解决方案1 3 2014-01-18 23:08:43

解决方案1
3 2014-01-18 23:08:43