My goal is to link two $timeout functions inside a $watch. This $watch monitors user actions, and if any action is detected, both $timeout instances are canceled. Below is the code snippet outlining this scenario.
.run(['$rootScope', '$location', '$timeout', 'applicationCache', function ($rootScope, $location, $timeout, applicationCache) {
var popupTimer, logoutTimer;
var logoutInterval = 10000, popupInterval = 5000;
$rootScope.$watch(function detectIdle() {
if($rootScope.userLoggedIn){
(popupTimer) ? $timeout.cancel(popupTimer) : undefined; // check if timer running, cancel it
(logoutTimer) ? $timeout.cancel(logoutTimer) : undefined; // check if other timer running, cancel it
popupTimer = $timeout(function(){
console.log("show popup");
logoutTimer = $timeout(function(){
console.log("logout");
$rootScope.userLoggedIn = false; // set logged In status to false
applicationCache.removeAll(); // destroy all session storage
$location.path("/login");
},logoutInterval);
},popupInterval);
}
});
}])
The aim here is to display a popup to indicate session expiration after 5 seconds of inactivity, leading to automatic logout after 10 seconds without interaction. Upon interaction, both timers should be reset.
A problem I am encountering is that when there is no user interaction, the inner timeout does not trigger; rather, it gets immediately canceled after initialization. The console only displays "show popup" repeatedly, with "logout" never being printed. It seems like $watch interrupts the execution of the second timer by canceling it prematurely.
To address this issue, what steps can be taken?