SetTimeout pauses on alert

I have to display a timer on my webpage. I am doing this using Javascript SetTimeout method. My code is like:

function UpdateTimer() {
        var hfTimer = $('#<%= hfTimer.ClientID %>');
        $('#spnTimer').html(GetElapsedTime(hfTimer.val()));
        hfTimer.val(parseInt(hfTimer.val(), 10) + 1);
        setTimeout(UpdateTimer, 1000);
    }

    function GetElapsedTime(seconds) {
        var sec_num = parseInt(seconds, 10);
        var hours = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours < 10) { hours = "0" + hours; }
        if (minutes < 10) { minutes = "0" + minutes; }
        if (seconds < 10) { seconds = "0" + seconds; }
        var time = hours + ':' + minutes + ':' + seconds;
        return time;
    }

Timer works fine until there is some alert pops out. Alert could be a simple jquery alert or sometime validation summary alert. When this alert comes timer pauses and as I click on "Ok", timer starts running again. I don't want this pause to happen. Is there any solution to this. Please help me.

Solution

I don't think you can do anything to actually avoid the pause, but you can make sure your timer recovers after the pause.

var timer;

$(function () {
    $('#messThingsUp').click(function () {
        alert('timer stops...');
    });
    $('#datestamp').val(new Date().getTime());
    timer = setInterval(UpdateTimer, 200);
});

function UpdateTimer() {
    var hfTimer = $('#hfTimer');
    var before = $('#datestamp').val();
    var now = new Date().getTime();
    $('#spnTimer').html(GetElapsedTime(Math.floor(hfTimer.val())));
    hfTimer.val(parseFloat(hfTimer.val()) + ((now - before) / 1000));
    $('#datestamp').val(now);
}

function GetElapsedTime(seconds) {
    var sec_num = parseInt(seconds, 10);
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var time = hours + ':' + minutes + ':' + seconds;
    return time;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="hidden" id="hfTimer" value=0 />
<input type="hidden" id="datestamp" />
<div id="spnTimer">00:00:00</div>
<br />
<input type="button" id="messThingsUp" value="press me" />

Please note that in order to have better resolution the timer interval is set at 200ms; this may or may not be acceptable in your situation, since it will make the browser check the timer very often, and it may interfere with other timed tasks like animations. You can adjust the interval to be greater (<= 1000), but the greater the interval, the greater the chance the timer will report incorrect results after the pause, before it can "catch up"...