javascript countdown timer for session timeout

Question

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>

Does this script only works when the user click anything on the application or does it automatically detects the timeout like banking websites? — alice7
– alice7, Commented Jun 20, 2012 at 15:30

Community · Accepted Answer · 2017-05-23 11:59:17Z

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.

AtLeastTheresToast · Accepted Answer · 2019-01-25 18:16:40Z

I found this solution to be very helpful. You will need to set your authentication timeout in the web.config file of your project to support this but I also added the option for a user to continue their session if they would like.

add the following to your Master HTML page in the head tag:

<style type="text/css">
#timeOutWarningOverlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    cursor: pointer;
}
</style>

right under the start of the body tag

<div id="timeOutWarningOverlay">
    <div style="height:auto; width:400px; background-color:white; position: fixed;top: 50%;left: 50%; -webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding:10px; text-align:center;"> 
        <div>
            <b>Your session is about to expire. Please click button below to keep this session current.</b>
            <b><span style="background-color:yellow;">00:</span><span id="time" style="background-color:yellow;">59</span></b>
        </div>
        <a id="keep" href="#">Keep Me Logged In</a>
    </div>
</div>

Now the JavaScript to handle this. I like using Jquery so this is mostly in Jquery but you can get the idea from the approach. This example is for a 15 minute timeout. Remember you need to update your web.config file authentication timeout.

    var counter = 60;
    var idleTime = 0;
    var countdown;
    $(document).ready(function () {

        $(window).click(function () {
            console.log("click has occured");
            idleTime = 0;
        })
        $(window).keyup(function () {
            console.log("key up has occured")
            idleTime = 0;
        })

        //Increment the idle time counter every minute.
        var idleInterval = setInterval(timerIncrement, 60000); //found

        $('#keep').click(function () {
            idleTime = 0;
            $('#timeOutWarningOverlay').hide();
        });

    });

    function timerIncrement() {
        idleTime = idleTime + 1;
        console.log(idleTime);
        if (idleTime > 13) //13
        {
            $('#timeOutWarningOverlay').show();
            startTimer();
        }
        if (idleTime > 14) { // 14 
            window.location.href = '/login.aspx';
            alert("You session has expired due to no activity.");
        }
    };


    function startTimer() {
        countdown = setInterval(countDownClock, 1000);
    };

    function countDownClock() {
        counter = counter - 1
        if (counter < 10) {
            console.log(counter);
            $('#time').text("0" + counter);
        }
        else {
            console.log(counter);
            $('#time').text(counter);
        }
        if (counter == 0) {
            counter = 60;
            clearInterval(countdown);
            console.log(counter);
            console.log("done");
        }
    };

The message will pop up after 14 minutes and start to count down the seconds for the user. Hope this helps, happy coding.

Really helpful... Made my day easy. I've added the cursor moving function as well. works great. thanks for the idea. cheers!!!!!

Steve · Accepted Answer · 2012-03-18 03:29:41Z

0

I would recommend using setInterval instead of setTimeout.

Something like this:

<script>
var startTime = new Date(milliseconds),
    timeoutLength = 60000;

var interval = setInterval("checkTimeout()",1000);
function checkTimeout() {
    var currentTime = new Date(millisecond);
    if (currentTime > startTime + timeoutLength) {
        clearInterval(interval);
        alert ("Your current Session is over due to inactivity.");
    }
}
</script>

answered Mar 18, 2012 at 3:29

Steve

8,6487 gold badges42 silver badges54 bronze badges

2 Comments

user249375 Over a year ago

Do i need to call this function from page load to get it to fire? If so, how?

Sangram Nandkhile Over a year ago

Could you please add a little bit of information about where to add this and how exactly this works. milliseconds throws an exception.

Ahsan · Accepted Answer · 2019-09-18 13:04:07Z

Solution 1 - Count down Timer

First just simple make countdown timer , code is given below and if you done then simple add windows.location path (redirect page address) .

 <sctipt>
        var interval;
         $(document).on('mousemove', function () {
             clearInterval(interval);
             var coutdown = 5 * 60, $timer = $('.timer'); // After 5 minutes session expired  (mouse button click code)
             $timer.text(coutdown);
             interval = setInterval(function () {
                 $timer.text(--coutdown);

                 if (coutdown === 0) {

                     alert("Session expired User successfully logout.");
                     window.location = "UserLogin.aspx";
                 }

             }, 1000);
         }).mousemove();



         var interval;
                     $(document).on('keydown', function () {
             clearInterval(interval);
             var coutdown = 5 * 60, $timer = $('.timer'); // After 5 minutes session expired (keyboard button press code)
             $timer.text(coutdown);
             interval = setInterval(function () {
                 $timer.text(--coutdown);

                 if (coutdown === 0) {

                     alert("Session expired User successfully logout.");
                     window.location = "UserLogin.aspx";
                 }

             }, 1000);
         }).mousemove();
    <sctipt>

And if you want show the time on your web page add this code .

   <html>
         <div class="timer">     
          <p> Session Time</p> 
         </div>
    </html>

Solution 2 - Count down Timer with buttons

HTML :

<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
        <div class="timer">
            <span class="hour">00</span>:<span class="minute">00</span>:<span class="second">10</span>
        </div>
        <div class="control">
            <button onClick="timer.start(1000)">Start</button> 
            <button onClick="timer.stop()">Stop</button> 
            <button onClick="timer.reset(60)">Reset</button> 
            <button onClick="timer.mode(1)">Count up</button> 
            <button onClick="timer.mode(0)">Count down</button>
        </div>

CSS :

div.timer {
    border:1px #666666 solid;
    width:190px;
    height:50px;
    line-height:50px;
    font-size:36px;
    font-family:"Courier New", Courier, monospace;
    text-align:center;
    margin:5px;
}

Javascript:

function _timer(callback)
{
    var time = 0;     //  The default time of the timer
    var mode = 1;     //    Mode: count up or count down
    var status = 0;    //    Status: timer is running or stoped
    var timer_id;    //    This is used by setInterval function

    // this will start the timer ex. start the timer with 1 second interval timer.start(1000) 
    this.start = function(interval)
    {
        interval = (typeof(interval) !== 'undefined') ? interval : 1000;

        if(status == 0)
        {
            status = 1;
            timer_id = setInterval(function()
            {
                switch(mode)
                {
                    default:
                    if(time)
                    {
                        time--;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                    }
                    break;

                    case 1:
                    if(time < 86400)
                    {
                        time++;
                        generateTime();
                        if(typeof(callback) === 'function') callback(time);
                    }
                    break;
                }
            }, interval);
        }
    }

    //  Same as the name, this will stop or pause the timer ex. timer.stop()
    this.stop =  function()
    {
        if(status == 1)
        {
            status = 0;
            clearInterval(timer_id);
        }
    }

    // Reset the timer to zero or reset it to your own custom time ex. reset to zero second timer.reset(0)
    this.reset =  function(sec)
    {
        sec = (typeof(sec) !== 'undefined') ? sec : 0;
        time = sec;
        generateTime(time);
    }

    // Change the mode of the timer, count-up (1) or countdown (0)
    this.mode = function(tmode)
    {
        mode = tmode;
    }

    // This methode return the current value of the timer
    this.getTime = function()
    {
        return time;
    }

    // This methode return the current mode of the timer count-up (1) or countdown (0)
    this.getMode = function()
    {
        return mode;
    }

    // This methode return the status of the timer running (1) or stoped (1)
    this.getStatus
    {
        return status;
    }

    // This methode will render the time variable to hour:minute:second format
    function generateTime()
    {
        var second = time % 60;
        var minute = Math.floor(time / 60) % 60;
        var hour = Math.floor(time / 3600) % 60;

        second = (second < 10) ? '0'+second : second;
        minute = (minute < 10) ? '0'+minute : minute;
        hour = (hour < 10) ? '0'+hour : hour;

        $('div.timer span.second').html(second);
        $('div.timer span.minute').html(minute);
        $('div.timer span.hour').html(hour);
    }
}

// example use
var timer;

$(document).ready(function(e) 
{
    timer = new _timer
    (
        function(time)
        {
            if(time == 0)
            {
                timer.stop();
                alert('time out');
            }
        }
    );
    timer.reset(0);
    timer.mode(0);
});

Collectives™ on Stack Overflow

javascript countdown timer for session timeout

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related