使用jQuery, AJAX, Google可视化API和setTimeout()时浏览器内存泄漏

Browser Memory Leak when using jQuery, AJAX, Google Visualization API and setTimeout()

本文关键字：内存 泄漏 setTimeout 浏览器 AJAX jQuery Google 可视化 API 使用      更新时间：2023-09-26

在执行下面的代码时，我注意到浏览器内存泄漏，如果我让仪表板页面加载超过24小时，它会使计算机无响应。

代码应该是相当不言自明的:"hourlyindicators"数据是通过AJAX调用Perl脚本检索，并提供给谷歌可视化API的LineChart小部件，我想实现网页的自动刷新在给定的间隔(设置为5分钟现在)。刷新是有效的，但是存在一个问题，内存消耗随着时间的推移稳步增加。

我需要Javascript闭包吗?抱歉，如果错误是明显的，我是非常新的AJAX/JQuery开发…

<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API
google.load('visualization', '1', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
  var jsonDatahourlyindicators = $.ajax({
      type: "GET",
      url: "http://localhost/cgi-bin/hourlyindicators.pl",
      dataType: "json",
      cache: false,
      async: false
      }).responseText;
  // Create our data table out of JSON data loaded from server.
  var datahourlyindicators = new google.visualization.DataTable(jsonDatahourlyindicators);
  // Create data view
  var viewfpy = new google.visualization.DataView(datahourlyindicators);
  // Select columns to display
  viewfpy.setColumns([0,1,2]);
  // Instantiate and draw our chart, passing in some options.
  var charthourlyfpy = new google.visualization.LineChart(document.getElementById('hourlyindicators_div'));
  charthourlyfpy.draw(viewfpy,
                      {width: 800, 
                       height: 400, 
                       title: 'Today''s Hourly Indicators',
                       vAxis: {title:"Indicator Value",viewWindowMode:'explicit',viewWindow:{min:minfpy,max:100},textStyle:{color:'black',fontSize:20}},
                       hAxis: {title:"Hour of Day"},
                       series: {0:{color:'blue',lineWidth:5,pointSize:10},
                                1:{color:'green',lineWidth:10,visibleInLegend:false}}
                       });
  // Auto-refreshes every 5 minutes
  setTimeout('drawChart()', 5*60*1000); 
}
</script>
</head>
<body>
<div id="hourlyindicators_div"></div>
</body>
</html>

更改此代码-我用chrome分析器检查它，它看起来更好

  <html>
    <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    // Load the Visualization API
    google.load('visualization', '1', {'packages':['corechart']});
    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);
      var viewfpy = null;
       var charthourlyfpy = null;
    function drawChart() {
     var jsonDatahourlyindicators = $.ajax({
      type: "GET",
      url: "http://localhost/cgi-bin/hourlyindicators.pl",
      dataType: "json",
      cache: false,
      async: false
      }).responseText;

      // Create data view
      viewfpy = new google.visualization.DataView(datahourlyindicators);
      // Select columns to display
      viewfpy.setColumns([0,1]);
      // Instantiate and draw our chart, passing in some options.
      if (charthourlyfpy == null)
      {
        charthourlyfpy = new google.visualization.LineChart(document.getElementById('hourlyindicators_div'));
     }
      charthourlyfpy.draw(viewfpy,
                          {width: 800, 
                           height: 400, 
                           title: 'Today''s Hourly Indicators',
                         //  vAxis: {title:"Indicator Value",viewWindowMode:'explicit',viewWindow:{min:minfpy,max:100},textStyle:{color:'black',fontSize:20}},
                           hAxis: {title:"Hour of Day"},
                           series: {0:{color:'blue',lineWidth:5,pointSize:10},
                                    1:{color:'green',lineWidth:10,visibleInLegend:false}}
                           });
      // Auto-refreshes every 5 minutes
      setTimeout('drawChart()',1000); 
    }
    </script>
    </head>
    <body>
    <div id="hourlyindicators_div"></div>
    </body>
    </html>
相关文章：