Question

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

代码应该是不言自明的：通过对Perl脚本的AJAX调用检索“hourlyindicators”数据并将其输入到Google Visualization 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>

Answer 1

更改为此代码 - 我使用chrome profiler检查它看起来更好

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

使用jQuery，AJAX，Google Visualization API和setTimeout（）时浏览器内存泄漏

1 个答案: