Using a javascript countdown timer within an asp.net ajax application

Question

After spending hours trying to work out what's going on within my app, I have discovered there's a problem with my code that sets a javascript interval.

Here is my code that sets the interval...

Sys.Application.add_load(function PageLoad(sender, args) {

        var timer = $("#lbTimer");
        var intVal = "";
        var verifiedTime = Date.parse(timer.html());

        if ($("#imgLock").hasClass("hidden") && !isNaN(verifiedTime) && verifiedTime != null) {

            $("#imgLock").addClass("hidden");
            $("#imgUnlock").removeClass("hidden");

            intVal = setInterval(function () {
                $("#lbTimer").html(function () {
                    var t = parseInt((new Date() - verifiedTime) / 1000, 10);
                    t %= 3600;
                    var m = Math.floor(t / 60);
                    var s = Math.floor(t % 60);

                    if (m == 0 && s == 0) {

                        $("#lbLocked").removeClass("hidden");
                        $("#imgLock").removeClass("hidden");
                        $("#imgUnlock").addClass("hidden");
                        $("#lbTimer").html("");
                        window.clearInterval(intVal);
                        verifiedTime = "";
                    } else {
                        if (s == 0) {
                            $(this).html((m + ":0" + s).replace("-", ""));
                        } else {
                            $(this).html((m + 1 + ":" + s).replace("-", ""));
                        }

                        if (s > -10) {
                            if (m == -1) {
                                $(this).html($(this).html().replace(":", ":0"));
                            } else {
                                $(this).html($(this).html().replace("-", "0"));
                            }
                        } else {
                            $(this).html($(this).html().replace("-", ""));
                        }
                    }
                });
            }, 1000);

            $("#lbTimer").removeClass("hidden");


});

Now this works absolutely fine if there a fullpage reload. Problem is that I'm developing an ajax enabled website and everything updates within an updatepanal.

The problem I'm encountering is that when the updatepanel panel updates a new javascript interval is being created so another counter is being added into #lbTimer resulting in a flicker between 2 or more countdown timers.

Obviously as the script is running on each pageload there's no way of clearing the interval that's already running on the page that I can see, which is resulting in multiple timers.

I did add in the following, whic solved the problem for a while, however I need the timer to update again on partial pageloads.

if (!args.get_isPartialLoad()) {
//Timer code here
}

Does anyone have any suggestions or recommendations how I can use a javascript countdown timer in my app allowing me to clear the interval to create a new one on partial page loads?

Hopefully I've given enough detail, but I can add more if required.

Thanks in advance for time and help!

Answer 1

Write the followig in partial load to clear off the timer set previously

var intervalID; 
var resetTimer = function() {   
if (intervalID) { 
clearInterval(intervalID) };   
intervalID = setInterval(function() {    your code here....};