Efficient ways to do a timer which updates every second in JavaScript
<p>I had a task to make a progress bar and a process duration timer along with it. So, not thinking twice I did this:</p>

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

<p>And the JS:</p>

<pre><code>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);
}​
</code></pre>

<p>Time is actually retrieved from another variable - this ones for the demo (to illustrate that I actually have the value in miliseconds).</p>

<p>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%.</p>

<p>Is there a more efficient way to do this?</p>
