Am I using setTimeout() properly?

pondo · 10-14-2003, 06:19 PM

I'm trying to create a progress bar that increments every time a specific function, in this case "interval()" is called. When the code below executes, my progress bar goes straight from 0% to 100%. But, if I uncomment the 'alert()' line, it works perfectly (except for the alert box).

Here's a link to a page with this code: [click here]

Any insights into my dilemma will be much appreciated.

// JS Code follows * * * *

function interval () {

var progWidth = Math.round ( 100 / document.numIntervals * ( ++document.curInterval ) );

document.all [ "percent" ].innerText = progWidth + "%";
document.all [ "progress" ].width = Math.round ( progWidth * .85 ) + "%";
//alert ( progWidth );
}

function doStuff () {

// Number of times interval() is called is calculated
document.numIntervals = 25;
document.curInterval = 0;

setTimeout ( "interval()", 1000 );
setTimeout ( "interval()", 1000 );

for ( var i = 0; i < document.numIntervals - 2; i++ ) {
setTimeout ( "interval()", 1000 );
}

return ( true );
}

Mr J · 10-14-2003, 08:19 PM

Please try the following

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script>
bar_max_width=600
percent=4
step_size=Math.round((bar_max_width/100)*percent)
count=0
function ex(){
my_bar.style.width =parseInt(my_bar.style.width)+step_size
bar_chk=parseInt(my_bar.style.width)
if(bar_chk>bar_max_width){
setTimeout("bar_chk=2;my_bar.style.width=2",5000)
}
count+=percent*1
document.getElementById("my_bar").innerHTML=count
}
</script>

</HEAD>
<BODY>

<button onclick="ex()">Click</button>
<div style="position:absolute;left:10px;top:100px;width:600px;background-color:#FFFF00;text-align:center;border:1 solid black">PROGRESS BAR</div>
<div id="my_bar" style="position:absolute;left:10px;top:101px;width:2px;background-color:#DDDD00;border-left:1 solid black"></div>

</BODY>
</HTML>