please find below a short example program that is designed to show
successive rows of cells in a browser (firefox) at regular intervals.
My problem is that as the number of cell rows increases the time
interval appears to lengthen making the running program appear to slow
down.
How can I make the cell rows appear at regular intervals without
slowing down?
Thanks in advance for any feedback.
Peter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
><script>
var cellSize=5;
var numCells=100;
var overallWidth=(cellSize+2)*numCells;
var intervalId;
function createCell(){
var cell= document.createElement('div');
cell.style.border='1px solid #ccc';
cell.style.width=cellSize+'px';
cell.style.height=cellSize+'px';
cell.style.cssFloat='left';
cell.style.backgroundColor='#ffc';
return cell;
}
function createCellRow(){
var div=document.createElement('div');
div.style.width=overallWidth+'px';
for (var i=0; i<numCells; i++)
{ div.appendChild(createCell()); }
mainDiv.appendChild(div);
}
function start(){ intervalId=setInterval (createCellRow, 200); }
function stop(){ clearInterval(intervalId); }
function init(){
mainDiv=document.getElementById('mainDiv');
mainDiv.className='mainDiv';
mainDiv.style.width=overallWidth+'px';
var startButton=document.createElement('button');
startButton.innerHTML='Start';
startButton.onclick=start;
mainDiv.appendChild(startButton);
var stopButton=document.createElement('button');
stopButton.innerHTML='Stop';
stopButton.onclick=stop;
mainDiv.appendChild(stopButton);
}
</script>
</head>
<body onload='init()'>
<div id='mainDiv'>
</div>
</body>
</html>
