使用 jQuery、AJAX、Google Visualization API 和 setTimeout() 时出现浏览器内存泄漏

发布于 2024-12-17 23:03:33 字数 2311 浏览 0 评论 0原文

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

代码应该是不言自明的：“每小时指标”数据是通过对 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>

原文

I am noticing a browser memory leak when executing the code below, to the point that it makes the computer unresponsive if I leave the dashboard page loaded for more than 24 hours.

The code should be quite self-explanatory: the "hourlyindicators" data is retrieved by an AJAX call to a Perl script and fed into a LineChart widget of the Google Visualization API, and I'd like to achieve an automatic refresh of the webpage at a given interval (set to 5 minutes for now). The refreshing works, but there is an issue somewhere as memory consumption increases steadily over time.

Do I need a Javascript closure? Sorry if the mistake is obvious, I am very new to AJAX / JQuery development...

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

随心而道 2024-12-24 23:03:33

更改此代码 - 我用 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>

change to this code - i check it with chrome profiler and it looks better

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

回复收藏 0 原文

~没有更多了~