我在执行以下代码时注意到浏览器内存泄漏，以至于如果我让仪表板页面加载超过 24 小时，它会使计算机无响应。
代码应该是不言自明的:“hourlyindicators”数据是通过对 Perl 脚本的 AJAX 调用检索的，并输入到 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>
最佳答案
更改此代码 - 我用 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>
关于javascript - 使用 jQuery、AJAX、Google Visualization API 和 setTimeout() 时浏览器内存泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8237877/