Why unable to Clear the SetInterval in javascript ? is this approach is wrong?

Question

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

Answer 1

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);
//...

Answer 2

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.