Memory leak when periodically updating table column
Memory leak when periodically updating table column
sglovin
Posts: 2Questions: 0Answers: 0
We just started using DataTables and really like it. However we have a seen a memory leak in the browser when we periodically update a column in the table. I have seen this on a Mac running both Firefox 3.6.13 and Chrome 8.0. It seems like it is leaking about 10 meg per hour on Firefox. Using the Chrome memory profiler it looks like the HTMLInputElement is growing rapidly. We are using DataTables v1.7.5.
Attached is a test html page that shows this behavior. It creates a simple table and then a notification script runs every 5 seconds and updates the "Friends" column with a random integer between 0 and 5. It is updating the DOM directly through the jquery html() method and then rebinding the table. I have also tried changing the code explicitly call the fnDestroy() method but it still has this problem.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
$(document).ready(function() {
doBindDataTable();
setInterval('updateFriends()', 5000);
} );
function doBindDataTable()
{
var nameId = "#example";
//var nameFilter = nameId + "_filter > input";
// if table does not yet exist, ignore
if ($(nameId).length == 0)
return;
var summaryTable = $(nameId).dataTable({"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bStateSave": true,
"bDestroy": true,
"sDom": '<"top"fi>rt<"bottom"lp><"clear">',
"aoColumns": [
null,
{ "sClass": "center", "sType": "html", "bSearchable": true }
]});
//summaryTable.width("100%");
}
var friendList = ["Sam-count", "Jill-count", "Harry-count", "Sally-count", "Jim-count", "Alison-count"];
function updateFriends()
{
for (friend in friendList)
{
var val = $(document.getElementById(friendList[friend]));
var rand = Math.floor(Math.random()*6);
val.html(rand);
}
doBindDataTable();
}
DataTables DOM positioning example
Live example
Name
Friends
Sam
4
Jill
5
Harry
6
Sally
7
Jim
6
Alison
17
[/code]
Thanks for your help.
Attached is a test html page that shows this behavior. It creates a simple table and then a notification script runs every 5 seconds and updates the "Friends" column with a random integer between 0 and 5. It is updating the DOM directly through the jquery html() method and then rebinding the table. I have also tried changing the code explicitly call the fnDestroy() method but it still has this problem.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
$(document).ready(function() {
doBindDataTable();
setInterval('updateFriends()', 5000);
} );
function doBindDataTable()
{
var nameId = "#example";
//var nameFilter = nameId + "_filter > input";
// if table does not yet exist, ignore
if ($(nameId).length == 0)
return;
var summaryTable = $(nameId).dataTable({"bAutoWidth": true,
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bStateSave": true,
"bDestroy": true,
"sDom": '<"top"fi>rt<"bottom"lp><"clear">',
"aoColumns": [
null,
{ "sClass": "center", "sType": "html", "bSearchable": true }
]});
//summaryTable.width("100%");
}
var friendList = ["Sam-count", "Jill-count", "Harry-count", "Sally-count", "Jim-count", "Alison-count"];
function updateFriends()
{
for (friend in friendList)
{
var val = $(document.getElementById(friendList[friend]));
var rand = Math.floor(Math.random()*6);
val.html(rand);
}
doBindDataTable();
}
DataTables DOM positioning example
Live example
Name
Friends
Sam
4
Jill
5
Harry
6
Sally
7
Jim
6
Alison
17
[/code]
Thanks for your help.
This discussion has been closed.
Replies
Good call - thanks for flagging this up. I forgot to unbind the event handlers in the table :-(. To fix the issue for the moment, adding the following just after the line: "oSettings.bDestroying = true;"
[code]
$(oSettings.nTableWrapper).find("*").andSelf().unbind();
[/code]
I don't think I'm going to commit that into the tree though, since it would destroy any events which might have been added to the table by something other than DataTables. To address that I'll look at adding in the event namespacing that jQuery offers (can't remember off the top of my head when it was introduced though). There should also be a caller for the plug-ins to do a 'destroy' and remove their events as well. I'll try to include this in 1.7.6.
Regards,
Allan
This really helped a lot!
Steve