show countdown time form jquery session timeout

Question

I've found https://github.com/travishorn/jquery-sessionTimeout this jquery session timeout that I want to use in my project.

It looks work fine in background, altough I want to show countdown time in a text?

How can I show the timer, or do you guys have any other suggestion except this?

(function( $ ){
    jQuery.sessionTimeout = function( options ) {
        var defaults = {
            message      : 'Your session is about to expire.',
            keepAliveUrl : '/keep-alive',
            redirUrl     : '/timed-out',
            logoutUrl    : '/log-out',
            warnAfter    : 900000, // 15 minutes
            redirAfter   : 1200000 // 20 minutes
        };

        // Extend user-set options over defaults
        var o = defaults,
                dialogTimer,
                redirTimer;

        if ( options ) { o = $.extend( defaults, options ); }

        // Create timeout warning dialog
        $('body').append('<div title="Session Timeout" id="sessionTimeout-dialog">'+ o.message +'</div>');
        $('#sessionTimeout-dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            closeOnEscape: false,
            open: function() { $(".ui-dialog-titlebar-close").hide(); },
            buttons: {
                // Button one - takes user to logout URL
                "Log Out Now": function() {
                    window.location = o.logoutUrl;
                },
                // Button two - closes dialog and makes call to keep-alive URL
                "Stay Connected": function() {
                    $(this).dialog('close');

                    $.ajax({
                        type: 'POST',
                        url: o.keepAliveUrl
                    });

                    // Stop redirect timer and restart warning timer
                    controlRedirTimer('stop');
                    controlDialogTimer('start');
                }
            }
        });

        function controlDialogTimer(action){
            switch(action) {
                case 'start':
                    // After warning period, show dialog and start redirect timer
                    dialogTimer = setTimeout(function(){
                        $('#sessionTimeout-dialog').dialog('open');
                        controlRedirTimer('start');
                    }, o.warnAfter);
                    break;

                case 'stop':
                    clearTimeout(dialogTimer);
                    break;
            }
        }

        function controlRedirTimer(action){
            switch(action) {
                case 'start':
                    // Dialog has been shown, if no action taken during redir period, redirect
                    redirTimer = setTimeout(function(){
                        window.location = o.redirUrl;
                    }, o.redirAfter - o.warnAfter);
                    break;

                case 'stop':
                    clearTimeout(redirTimer);
                    break;
            }
        }

        // Begin warning period
        controlDialogTimer('start');
    };
})( jQuery );

and this is the working sample => http://jsfiddle.net/xHEF9/515/

Answer 1

Try this

var SessionTime = 10000;
var tickDuration = 1000;

var myInterval = setInterval(function() {
    SessionTime = SessionTime - tickDuration
    $("label").text(SessionTime);
}, 1000);

var myTimeOut = setTimeout(SessionExpireEvent, SessionTime);

$("input").click(function() {
    clearTimeout(myTimeOut);
    SessionTime = 10000;
    myTimeOut = setTimeout(SessionExpireEvent, SessionTime);
});

function SessionExpireEvent() {
    clearInterval(myInterval);

    alert("Session expired");
}

See this jsFiddle example.