为什么无法在JavaScript中清除SetInterval？这种做法是错误的？

Question

在我的一个应用程序中，基于角度的应用程序在用户闲置10分钟后写入用户会话时间，在第5分钟弹出警告，10分钟后需要注销。

以下代码适用于应用程序。 在一个模块必须清除setinterval，我无法通过使用 **clearInterval(idleCheck);** .so在下面的代码中出错。

角运行块已经实现了用户在状态之间导航，延长了10分钟的时间。

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


    }); 
}); 

如果用户有一些服务器请求意味着在这个块中有延长时间再加上时间。

我必须清除会话，如果url是这样的;试图清除它不清除。

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

       } 

其他{

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

所以在一个模块必须停止setInterval.But ClearInterval没有停止。

这是完整的一段代码。

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

问题：

但无法清除的时间间隔。

如果我使用$间隔，时间不正确，无法通过使用$ interval.cancel Github的工作，明确：演示：https://github.com/MohamedSahir/UserSession

步骤：经过视频获得更多有关的问题： 演示视频： http://recordit.co/xHkJeUSdp1 演示plunker：https://plnkr.co/edit/UkVUvFWIQKYD6SUumNv4?p=preview

Answer 1

当AngularJS工作，你应该使用$interval服务。

在你的情况下，它会是这样的（重复相同的每一个你需要创建间隔）：

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

       //... your code (omitted) 

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

//...clear interval 
     $interval.cancel(idleCheck); 
//... 

Answer 2

不要在角使用的setInterval。

AngularJS为setInterval提供了一个很好的$ interval包装，它提供了一个promise API。

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

PS：您注射相同的，但你不使用它。