Having issues with session timeout

Question

Need your valuable feedback on this. I have implemented idletimeout functionalty so that session will expire in 3 minutes if the user is idle.

In three scenario, I am resetting the timer.

1. On click or tap
2. after 2 seconds while processing is in progress
3. on scroll or scrollstart

The problem is sometimes session is getting timeout before the 3 minutes even if I tap, click or scroll and user is redirected to login page even if the function is gets called on tap click or scroll and resettimers is getting called. I am facing a bit hard time to figure out the loophole.

I am posting the code; please let me know if you notice anything.

   // Set timeout variables.
var timoutNow = 180000 ;

var ua = navigator.userAgent; 
var event = ((ua.match(/iPad/i)) || (ua.match(/iPhone/i)) || (ua.match(/iPod/i))) ?    'touchstart' : 'click';

var logoutUrl = Mobile+'/login.html'; // URL to logout page.

var timeoutTimer;

// Start timers.
function StartTimers() {        
    timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
    //console.log(timoutNow);

}

// Reset timers.
function ResetTimers() {       
    clearTimeout(timeoutTimer);     
    StartTimers();       
}

// Processing time check.
function Laodtimercheck()
        {
        setInterval(function(){ 

             if($("body").hasClass("loading-processing")==true)
             {
                ResetTimers();              
             }
        }, 2000);
        }   


// Logout the user.
function IdleTimeout() {
  sessionStorage.clear();
  document.location.href = Mobile+'/login.html';
}

$(document).live(event, function(){
        //console.log("Reset timers: ON TAP OR CLICK");
        ResetTimers();
});

$(document).mouseover(function() {
        //console.log("Reset timers: ONMOUSEOVER");
        ResetTimers();

});
$(window).scroll(function() {
        //console.log("Reset timers: SCROLL");
        ResetTimers();          
});

$(document).live("scrollstart", function(){
//console.log("Reset timers: SCROLLSTART");
                ResetTimers();
});

EDIT: setTimeout only working first two times; next time ResetTimers are getting invoked but the setTimeout is not working or I might be missing something here as the session is getting timed out as per pervious two call time only....

Answer 1

The real problem that you're having is the folowing: "ResetTimers" not being invoke enough. Why is not being invoked enough? I'll try to answer that.

All the logic is Ok with a few exceptions. There are two "problematic" events that not work or I think don't work like you want.

1.- LIVE (event)

That event is not being fired never. You cannot attach a live event to a document, yo need to specify a node, like html or body.

$("body").live(event, function(){
        //console.log("Reset timers: ON TAP OR CLICK");
        ResetTimers();
});

That's why when clicked the timer don't reset. Another (and recomended) way to use a variable for binding events is to use .delegate(). Since jQuery 1.4.3+ is the recomended way of doing this.

$(document).delegate("body", event, function(){
        //console.log("Reset timers: ON TAP OR CLICK (delegate)");
        ResetTimers();
});

Any of those (live on body or delegate) would work and timer get reset on click or tap event.

2.- MOUSEOVER

There isn't a problem per se with this event, but I think it would be insuficient. MouseOver only fires where the pointer get on screen first time, if the mouse don't leave the window the mouseover never fires again. Maybe, a better or added way of control "mouse hovering" on the document is to use onmousemove event. Like I said in a comment before, I don't know if you want to be strict on this, so I left you a proposal and let's see if it fits your needs.

$(document).mouseover(function() {
        console.log("Reset timers: ONMOUSEOVER");
        ResetTimers();

});

In my tests, events get fires a lot, and the timers get reset on each event without problems. I hope it helps you.