顯示倒計時時間窗體jQuery會話超時

Question

我發現https://github.com/travishorn/jquery-sessionTimeout這個jquery會話超時，我想在我的項目中使用。

它看起來在後臺工作很好，儘管我想在文本中顯示倒計時時間嗎？

我該如何顯示計時器，或者你們有其他建議嗎？

(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); 

，這是工作示例=>http://jsfiddle.net/xHEF9/515/

Answer 1

嘗試此

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"); 
} 

見本jsFiddle例子。