Question

I had a task to make a progress bar and a process duration timer along with it. So, not thinking twice I did this:

<div class="mainInfo">
    <div id="timer"><span id="elapsedText">0:00</span>/<span id="durationText">3:00</span></div>
    <div id="progressBar"><div id="progress" style="width:0;"></div></div>
</div>​

And the JS:

var time = 1000;
var duration = 180;

var $progress = $("#progress");
var $elapsedText = $("#elapsedText");

updateTime();

function updateTime() {
    var elapsed = time / 1000;
    $elapsedText.text(Math.floor(elapsed / 60) + ":" + Math.floor(elapsed % 60));
    $progress.css('width', (elapsed * 100 / duration) + "%");
    time = time + 1000;
    setTimeout("updateTime()", 1000);
}​

Time is actually retrieved from another variable – this ones for the demo (to illustrate that I actually have the value in miliseconds).

And it worked (not only on my PC), and still does, but the procmon shows a CPU spike on browser (chrome, ff) process when this cycle is running – 30-40% instead of regular 0,5%.

Is there a more efficient way to do this?

Answer 1

Instead of

setTimeout("updateTime()", 1000);

use

setTimeout(updateTime, 1000);

The fact that you’re invoking the compiler each second could really hurt performance. Passing a string to setTimeout is basically causing an eval within the setTimeout.