为什么无法在 javascript 中清除 SetInterval？这种方法是错误的吗？

Question

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

以下代码在应用程序中正常工作。 在一个模块中必须清除 setinterval，我无法通过使用清除它 **clearInterval(idleCheck);** .so 下面的代码出了点问题。

angular run block已实现用户在状态之间导航，延长时间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。但 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 ，计时工作不正常，无法使用 $interval.cancel 清除 Github：演示：https://github.com/MohamedSahir/UserSession

步骤：通过视频了解有关问题的更多信息： 演示视频：http://recordit.co/xHkJeUSdp1 Demo 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：你注射的是相同的，但你没有使用它。