drewww · September 8, 2010 18:55
diff --git a/leak_test.html b/leak_test.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 	"http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 
 	<!-- Combo-handled YUI CSS files: -->
 	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.1/build/button/assets/skins/sam/button.css&2.8.1/build/datatable/assets/skins/sam/datatable.css">
 	<!-- Combo-handled YUI JS files: -->
 	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/element/element-min.js&2.8.1/build/button/button-min.js&2.8.1/build/datasource/datasource-min.js&2.8.1/build/datatable/datatable-min.js"></script>


 <script type="text/javascript" charset="utf-8">
 	YAHOO.util.Event.onDOMReady(init);
 	
 	function init() {
 		console.log("Initializing DataSource and DataTable.");
 		
 		// Create a trivial data source for our table. Sticking with
 		// a local source for convenience.
 		dataSource = new YAHOO.util.LocalDataSource(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40"]);
 		
 		// Trivial schema.
 		dataSource.responseSchema = {fields:["id"]};
 		
 		// Set up the columns, with the offending formatter.
 		var columns = [{
 			key:"id",
 			label:"id",
 			formatter: function(elCell, oRecord, oColumn, oData) {

 				// The loop adds more buttons to each row to 
 				// accelerate the leak. 
 				for(i=0; i<5; i++) {
 					
 					// Adding buttons is what causes the leak;
 					// if you comment out the button creation,
 					// there won't be any leak. This is true in my
 					// larger (and much more elaborate) app.
 					var button = new YAHOO.widget.Button({
 						container:elCell,
 						type: "push",
 					});
 					
 					// If I destroy the button after creating it,
 					// memory won't leak. This is the solution
 					// I've settled on in my application; I keep
 					// traack of all my button objects and destroy
 					// them each when reloading the DataTable. 
 					// But I wonder if this represents a deeper bug
 					// in the way DataTables refresh? Or perhaps
 					// there are circular references between buttons
 					// and their DOM elements?
 					
 					// Uncomment to stop the leak.
 					// button.destroy();
 				}
 				}}];
 		
 		// Create the data table.
 		dataTable = new YAHOO.widget.DataTable("dataTable",
 			columns, dataSource, {
 				initialLoad: true,
 				sortedBy: {key:"id"}
 			});
 			
 		// Turn on refreshing. One second interval
 		// to leak as fast as possible. On data return,
 		// reinit the table.
 		dataSource.setInterval(1000, null, {
 			success:refresh,
 			failure:function() {alert("update failed")},
 			scope:dataTable,
 			});
 	}

 	function refresh(o, response) {
 		console.log("Updating dataTable.");
 		this.onDataReturnInitializeTable(o, response);
 	}
 	
 </script>


 </head>
 <body class="yui-skin-sam" id="test">
 <div id="dataTable"></div>
 </body>
 </html>
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>

	<!-- Combo-handled YUI CSS files: -->
	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.8.1/build/button/assets/skins/sam/button.css&2.8.1/build/datatable/assets/skins/sam/datatable.css">
	<!-- Combo-handled YUI JS files: -->
	<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.8.1/build/yahoo-dom-event/yahoo-dom-event.js&2.8.1/build/element/element-min.js&2.8.1/build/button/button-min.js&2.8.1/build/datasource/datasource-min.js&2.8.1/build/datatable/datatable-min.js"></script>


	<script type="text/javascript" charset="utf-8">
	YAHOO.util.Event.onDOMReady(init);

	function init() {
	console.log("Initializing DataSource and DataTable.");

	// Create a trivial data source for our table. Sticking with
	// a local source for convenience.
	dataSource = new YAHOO.util.LocalDataSource(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40"]);

	// Trivial schema.
	dataSource.responseSchema = {fields:["id"]};

	// Set up the columns, with the offending formatter.
	var columns = [{
	key:"id",
	label:"id",
	formatter: function(elCell, oRecord, oColumn, oData) {

	// The loop adds more buttons to each row to
	// accelerate the leak.
	for(i=0; i<5; i++) {

	// Adding buttons is what causes the leak;
	// if you comment out the button creation,
	// there won't be any leak. This is true in my
	// larger (and much more elaborate) app.
	var button = new YAHOO.widget.Button({
	container:elCell,
	type: "push",
	});

	// If I destroy the button after creating it,
	// memory won't leak. This is the solution
	// I've settled on in my application; I keep
	// traack of all my button objects and destroy
	// them each when reloading the DataTable.
	// But I wonder if this represents a deeper bug
	// in the way DataTables refresh? Or perhaps
	// there are circular references between buttons
	// and their DOM elements?

	// Uncomment to stop the leak.
	// button.destroy();
	}
	}}];

	// Create the data table.
	dataTable = new YAHOO.widget.DataTable("dataTable",
	columns, dataSource, {
	initialLoad: true,
	sortedBy: {key:"id"}
	});

	// Turn on refreshing. One second interval
	// to leak as fast as possible. On data return,
	// reinit the table.
	dataSource.setInterval(1000, null, {
	success:refresh,
	failure:function() {alert("update failed")},
	scope:dataTable,
	});
	}

	function refresh(o, response) {
	console.log("Updating dataTable.");
	this.onDataReturnInitializeTable(o, response);
	}

	</script>


	</head>
	<body class="yui-skin-sam" id="test">
	<div id="dataTable"></div>
	</body>
	</html>