PDA

View Full Version : Memory leak of drawing living line



yangjie.green
11 Jan 2013, 5:23 AM
Hi, I use ExtJS V4.1 and the following test code is draw a line of dynamic changes, the update time is set to 10 ms. When running about 10 minutes, the memory grew nearly 400M. However, if just add data to store, the memory is almost no change. Is there anyone has come across this problem and the solution? Thank you!



<html>
<head>
<title>test-memory-leak</title>

<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/ext-debug.js"></script>

<style type="text/css">
</style>

<script type="text/javascript">

var timerUpdate = null;
var store = null;
var curIndex = 0;
var count = 10;
var yValue = 0;
var chart = null;

Ext.onReady(function () {

Ext.define('coord',{
extend: 'Ext.data.Model',
fields: ['x', 'y']
});

store = Ext.create('Ext.data.Store',{
model: 'coord',
purgePageCount: 0,
data:[
{x: 2, y:2}
]
});

chart = Ext.create('Ext.chart.Chart', {
renderTo: 'chart',
width: 300,
height: 300,
store: store,
axes: [{
title: 'y',
type: 'Numeric',
position: 'left',
fields: ['y'],
minimum: 0,
maximum: count
},{
title: 'x',
type: 'Numeric',
position: 'top',
fields: ['x'],
minimum: 0,
maximum: count
}],
series: [
{
type: 'line',
xField: 'x',
yField: 'y'
}
]
});
});


function getData() {

if (store == null) {
return ;
}

yValue++;
if (yValue >= count) {
yValue = 0;
}

var data = [{x:curIndex, y:yValue}];

if ( curIndex <= 0 ) {
store.removeAll(true);

} else if ( curIndex > count){
store.removeAt(0);
store.each(function(record) {
var value = record.get('x');
value = value - 1;

record.set('x', value);

console.log(value);
});
curIndex--;

} else {

}

store.loadData(
data,
true
);

curIndex++;

var elDom = Ext.getDom('curIndex');

var curIndexDomId = Ext.fly('curIndex');
curIndexDomId.update(store.getCount()+" points");
}

function doStart() {

if (timerUpdate) {
clearInterval(timerUpdate);
timerUpdate = null;
}

timerUpdate = setInterval("getData()", 10);
}

function doStop() {

if (timerUpdate) {
clearInterval(timerUpdate);
timerUpdate = null;
}
}


</script>


</head>
<body>

<div id="curIndex" style="width:100px;height:30px;border:1px solid black;"></div>

<hr />

<div id="chart"></div>

v <div style="clear:both;">

<hr />

<input type="button" value="start" id="start" onclick="doStart();"/>
<input type="button" value="stop" id="stop" onclick="doStop();"/>

</body>
</html>