爲什麼無法在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：您注射相同的，但你不使用它。