0

In one of my app, angular based application have written the user session time put if user gets idle for 10 minutes , gets the warning pop up in 5th minute and after 10 minutes , needs to logout.

This below code is working properly for the application. In one module have to clear the setinterval, i am not able to clear it by using **clearInterval(idleCheck);** .so something went wrong in below code.

angular run block have implemented user navigated between states, extend the time for 10 minutes.

myApp.run(function ($rootScope $interval, $timeout, $state) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, $rootScope, $state, $location) {   

       lastDigestRun = Date.now();

       var m = lastDigestRun + 10 * 60 * 1000;      

        idleCheck = setInterval(function () {

              var now = Date.now();


                if (now - lastDigestRun > 5 * 60 * 1000) {
                    // show the pop up , the pop have continue to extend the time session if proceed        
                }
                if (now - lastDigestRun > 10 * 60 * 1000) {
                    // LOgout functionality
                }
            }
        }, 60 * 1000);


    });
});

And if user have some server request means have extend the time in this block to add the time again.

I have to clear the session,if url is like this; have try to clear its not clearing.

    if (url == 'stopsession') {               
                  clearInterval(idleCheck);

              }


var configFunction = function ($stateProvider, $httpProvider, $urlRouterProvider, $locationProvider,$scope) {
   var interceptor = function ($q, $rootScope, $timeout, $location) {
      return {
          request: function (config) {
          //  consider this module reuest come here
              if (url == 'stopsessionurl') {               
                  clearInterval(idleCheck);

              }

else {

                  lastDigestRun = Date.now();
                  var m = lastDigestRun +  10 * 60 * 1000;
                   idleCheck = setInterval(function () {

                          var now = Date.now();

                          if (now - lastDigestRun > 5 * 60 * 1000) {
                              // show pop up  to extend the time if click continue another 10 minutes gets added
                          }
                          if (now - lastDigestRun > 10 * 60 * 1000) {
                            // logout functionality
                          }

                  }, 60 * 1000);
                  return config;
              }
          },
            requestError: function (config) {            
                return config;
            },

            response: function (response) {

            },
            responseError: function (rejection) {


            }
        }
    };

    $httpProvider.interceptors.push(interceptor);
    };

So In one module have to stop the setInterval.But ClearInterval is not stopping.

This is full piece of code.

var idleCheck;

var myApp = angular.module('myApp','ui.router');
myApp.run(function ($rootScope $interval, $timeout, $state) {

    $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams, $rootScope, $state, $location) {   

       lastDigestRun = Date.now();

       var m = lastDigestRun + 10 * 60 * 1000;      

        idleCheck = setInterval(function () {

              var now = Date.now();


                if (now - lastDigestRun > 5 * 60 * 1000) {
                    // show the pop up , the pop have continue to extend the time session.

                }
                if (now - lastDigestRun > 10 * 60 * 1000) {
                    // LOgout functionality
                }
            }
        }, 60 * 1000);


    });
});

var configFunction = function ($stateProvider, $httpProvider, $urlRouterProvider, $locationProvider,$scope) {
   var interceptor = function ($q, $rootScope, $timeout, $location) {
      return {
          request: function (config) {

              if (url == 'stopsession') {               
                  clearInterval(idleCheck);

              }
              else {

                  lastDigestRun = Date.now();
                  var m = lastDigestRun + 10 * 60 * 1000;
                   idleCheck = setInterval(function () {

                          var now = Date.now();

                          if (now - lastDigestRun > 5 * 60 * 1000) {
                              // show pop up  to extend the time if click continue another 10 minutes gets added
                          }
                          if (now - lastDigestRun > 10 * 60 * 1000) {
                            // logout functionality
                          }

                  }, 60 * 1000);
                  return config;
              }
          },
            requestError: function (config) {            
                return config;
            },

            response: function (response) {

            },
            responseError: function (rejection) {


            }
        }
    };

    $httpProvider.interceptors.push(interceptor);
    };

Problems:

But Unable to clear the Interval.

if i am using $interval , timing is not working properly and unable to clear by using $interval.cancel Github: Demo :https://github.com/MohamedSahir/UserSession

Steps: go through video get more about issue: Demo Video :http://recordit.co/xHkJeUSdp1 Demo plunker: https://plnkr.co/edit/UkVUvFWIQKYD6SUumNv4?p=preview

Mohamed Sahir
  • 2,482
  • 8
  • 40
  • 71

2 Answers2

2

When working with AngularJS you should use the $interval service.

In your case it would go like this (repeat the same for every interval you need to create):

//... set interval
        idleCheck = $interval(function () {

              //... your code (omitted)

        }, 60 * 1000);
//...

//...clear interval
       $interval.cancel(idleCheck);
//...
lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
  • if i use $interval means for the firsttime ,the calculation is working fine ,when i extend the time again , for the calculation is wrong, in middle of the time its logout , if i use setInterval the time manner is working properly , but only problem is with cleartimeout. if you need create an plunker demo after sometime. – Mohamed Sahir Apr 26 '17 at 13:04
  • @MohamedSahir, please, could you create a [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve), maybe a plunker or a jsfiddle with the minimal required code, so I can reproduce your exact problem??? – lealceldeiro Apr 26 '17 at 13:09
  • Demo recorded video : http://recordit.co/xHkJeUSdp1 Have created github here : https://github.com/MohamedSahir/UserSession ,Plunker Here : https://plnkr.co/edit/3ywUgI9362UUatExZ4FM?p=preview Let me help if you found something – Mohamed Sahir Apr 27 '17 at 10:50
0

Don't use setInterval in angular.

AngularJS has a very nice $interval wrapper for setInterval which provides a promise API.

https://docs.angularjs.org/api/ng/service/$interval

PS: you are injecting the same but you are not using it.

pranavjindal999
  • 2,937
  • 2
  • 26
  • 35
  • in the beginning i have used $interval it shows unexpected behaviour so i have used setInterval its working fine with local variable clearInterval is the problem if you interest pls look through here something wrong in above code , if i used idlecheck as local variable ,working as expected but unable to clear the interval thttps://github.com/MohamedSahir/UserSession – Mohamed Sahir Apr 26 '17 at 19:26