Question

160

javascript countdown timer for session timeout

rated 0 times [ 161] [ 1] / answers: 1 / hits: 58108 / 12 Years ago, sun, march 18, 2012, 12:00:00

I want to alert the user that the session timeout is about to expire. I want to have a popup with an OK button and show the seconds ticking down on the popup. Can i do this with just java script?
Im OK with using C# code behind also.

Right now it detects session timeout and pops up telling them the session has expired.

<script type=text/javascript>

    var sessionTimeout = <%= Session.Timeout %>;



    function DisplaySessionTimeout() {

        sessionTimeout = sessionTimeout - 1;



        if (sessionTimeout >= 0)

          window.setTimeout(DisplaySessionTimeout(), 60000);

        else {

            alert(Your current Session is over due to inactivity.);

        }

    }

</script>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ashly

Add To Favorites

Follow

Total Points: 601

Total Questions: 95

Total Answers: 88

Location: Saint Vincent and the Grenadines

Member since Thu, Oct 15, 2020

4 Years ago

answered 12 Years ago clarkulisesa · Accepted Answer

Yes, you can do this via JavaScript. Here's a simple counter implementation that was inspired from this StackOverflow answer I found a while back:

function Counter(options) {

    var timer;

    var instance = this;

    var seconds = options.seconds || 10;

    var onUpdateStatus = options.onUpdateStatus || function() {};

    var onCounterEnd = options.onCounterEnd || function() {};

    var onCounterStart = options.onCounterStart || function() {};



    function decrementCounter() {

        onUpdateStatus(seconds);

        if (seconds === 0) {

            stopCounter();

            onCounterEnd();

            return;

        }

        seconds--;

    };



    function startCounter() {

        onCounterStart();

        clearInterval(timer);

        timer = 0;

        decrementCounter();

        timer = setInterval(decrementCounter, 1000);

    };



    function stopCounter() {

        clearInterval(timer);

    };



    return {

        start : function() {

            startCounter();

        },

        stop : function() {

            stopCounter();

        }

    }

};

... and an example of how to use it:

var countdown = new Counter({

    // number of seconds to count down

    seconds: 3,



    onCounterStart: function () { 

        // show pop up with a message 

        ... 

    },



    // callback function for each second

    onUpdateStatus: function(second) {

        // change the UI that displays the seconds remaining in the timeout 

        ... 

    },



    // callback function for final action after countdown

    onCounterEnd: function() {

        // show message that session is over, perhaps redirect or log out 

        ... 

    }

});

countdown.start();

Once the server is ready to alert the user, just create the timer and it'll start counting down. You can customize what happens on each event: when timer starts, when a second ticks by, and when the countdown is done.