Timing İssue in ASP.NET

Question

Hi Everybody,

I am developing an asp.net project and in this project I have used a countdown timer. I writed my countdown timer in jquery. It works very well. On the other hand when I clicked another page in my project then open the countdown page. My countdown timer should not be restarted. It have to continue count down properly. I think I do it with session but Session is a bit slower. And It is not fit with real time. How can I handle this problem?

Answer 1

var Timer;
var TotalSec;
function CreateTimer(TimerID, Time) {

    Timer = "#" + TimerID;
    TotalSec = Time;
    // $("mytimer").show("normal", UpdateTimer(TotalSec));
    UpdateTimer(TotalSec)
    window.setTimeout("Tick()", 1000);
}
function Tick() {
    //var toto = Totalsec;
    if (TotalSec <= 0) {

        alert("Time is up")
        jQuery('#btnSet').removeAttr("disabled");
        //       jQuery('#link').removeAttr("Enabled");       
        return;
    }
    TotalSec -= 1;
    UpdateTimer()
    window.setTimeout("Tick()", 1000);
}

function UpdateTimer() {

    var Seconds = TotalSec;

    var Days = Math.floor(Seconds / 86400);
    Seconds -= Days * 86400;

    var Hours = Math.floor(Seconds / 3600);
    Seconds -= Hours * (3600);

    var Minutes = Math.floor(Seconds / 60);
    Seconds -= Minutes * (60);


    var TimeStr = ((Days > 0) ? Days + " gün " : "") + LeadingZero(Hours) + ":" + LeadingZero(Minutes) + ":" + LeadingZero(Seconds)


    //        jQuery("" + Timer + "").text(TimeStr);
    jQuery("#lbldene").text(TimeStr);
}

function LeadingZero(Time) {

    return (Time < 10) ? "0" + Time : +Time;

}



$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "GenericWCF.svc/Timer",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg){
        CreateTimer('lbldene',msg.d);
        }
    });
});

I have used a WCF Service to get the remaining time so after page load timer begins to count down. But when click a new page in the application and return back the timer page. My timer reset I dont want it. I want to keep continue to count down

Answer 2

You could store the time remaining inside a cookie.

See Jquery Cookie Plugin

This would be an easy approach since everything is kept client side. However, if you need something a little more secure, you could keep track of it server side.

// public property on countdown page
public DateTime Countdown
{
    get
    {
        if (Session["Countdown"] == null)
            Session["Countdown"] = DateTime.Now;

        return Session["Countdown"];
    }
}

The idea being, that the first time the user visits the page, a session variable "Countdown" is created with the current date and time, subsequent visits to the page would retrieve the date and time the page was initially visited. You can render this out as a javascript variable on the page so that your timer can determine how long is left and count down from there.

You would also need to add some logic to that getter to reset the session variable if a certain Timespan has passed.