innerHTML not updated 'til function completes

lparker29 · Apr 29, 2008

I have a script that reads a file, massages it, writes an output file. It takes some time so I want a progress count of how many lines have been processed. But my counter only gets updated after the script has finished running. Any help is greatly appreciated.

<html>
<head>
<script type"text/javascript">
function processfile()
{
fso = new ActiveXObject("Scripting.FileSystemObject");
f1 = fs

penTextFile("C:\\infile.txt", 1);
f2 = fso.CreateTextFile("c:\\outfile.txt", true);
linecount=0;

while (!f1.AtEndOfStream)
{
line=f1.ReadLine();
linecount++;
document.getElementById('counter').innerHTML=linecount;
f2.WriteLine(line);
}

f2.WriteBlankLines(1);
f1.Close();
f2.Close();

return;
}
</script>
</head>

<body>
<table>
<tr><td align="center"><input type="button" value="Submit" onClick="processfile()">
</td></tr>

<tr><td align="center">Lines Read:&nbsp<span id="counter">0000000</span></td></tr>

</table>
</body>
</html>

yngjzy12 · Apr 29, 2008

Hey, heres one solution to this problem. The idea is to use setTimeout and closures. The setTimeout allows the browser to "breathe". Anyways, heres the code.

Code:

<html>
<head>
<script type"text/javascript">
function processfile(theCnt)
{
   if (theCnt == 0) {
      fso = new ActiveXObject("Scripting.FileSystemObject");
      f1 = fso.OpenTextFile("somefile.txt", 1);
      f2 = fso.CreateTextFile("output.txt", true);
      linecount=0;
   } else {
      linecount = theCnt;
   }


   line=f1.ReadLine();
   linecount++;
   document.getElementById('counter').innerHTML=linecount;
   f2.WriteLine(line);

   if (f1.AtEndOfStream) {
      closeFiles();
      return
   }

   setTimeout(function() { processfile(linecount); }, 0);
   return;

}

function closeFiles() {
   f2.WriteBlankLines(1);
   f1.Close();
   f2.Close();
}
</script>
</head>

<body>
<table>
<tr><td align="center"><input type="button" value="Submit" onClick="processfile(0)">
</td></tr>

<tr><td align="center">Lines Read:&nbsp<span id="counter">0000000</span></td></tr>

</table>
</body>
</html>

lparker29 · Apr 29, 2008

This does the trick, thank you very much for your help.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

innerHTML not updated 'til function completes

lparker29

Technical User

yngjzy12

Programmer

lparker29

Technical User

Similar threads

Part and Inventory Search

Sponsor