.run 块中 $interval 的意外行为

Question

我有一个 Angular JS 应用程序，我想在路由成功更改时每秒执行一次全局操作。所以我创建了一个 .run() 块，在其中我 DI $interval 并在 $routeChangeSuccess 上使用 $interval。奇怪的是，每次换路后，间隔开火的速度越来越快。 这是我的代码：

app.run(["$interval", "$rootScope", function($interval, $rootScope){

$rootScope.$on("$routeChangeSuccess", function(event, current){
    if(current.$$route.authenticate){
        $interval(function(){
            console.log("whatever");
        }, 1000);
    }

});

}]);

总而言之，“随便”控制台日志的触发速度越来越快。是因为 $interval 是单例，所以每次都会重新创建？但是为什么不删除旧的 $interval 呢？

Answer 1

我不明白您为什么要在每个 routeChange 上附加一个每秒运行的新间隔。如果我理解正确，您是否希望它在路由需要 authenticate 时每秒检查一次？如果是这样，如果路由不再是authenticate，则需要取消interval。

如果您不想再被解雇，您需要删除您的$interval。

var stopTime = $interval(DoJob, 1000);

// delete when you dont need it anymore.
$interval.cancel(stopTime);

查看documentation$interval

app.run(["$interval", "$rootScope", function($interval, $rootScope){
var intervalPtr = null;
$rootScope.$on("$routeChangeSuccess", function(event, current){
    //page needs authentication
    //and interval was not set yet.
    if(current.$$route.authenticate && intervalPtr === null){
        intervalPtr = $interval(function(){
            console.log("whatever");
        }, 1000);
    // page that does not need authentication
    // reset only of there is a interval running
    } else if (intervalPtr !== null) {
         $interval.cancel(intervalPtr);
         intervalPtr = null;
    }

});

}]);

Answer 2

在$interval 文档上：

此服务创建的间隔必须在以下情况下显式销毁 你已经完成了他们。特别是它们不会自动 当控制器的范围或指令的元素被销毁时 被摧毁。您应该考虑到这一点并确保 总是在适当的时候取消间隔。

所以不要忘记在创建新的之前取消之前的 $interval ：

app.run(["$interval", "$rootScope", function($interval, $rootScope){
var interval = null;

$rootScope.$on("$routeChangeSuccess", function(event, current){
      $interval.cancel(interval);        
      if(current.$$route.authenticate){
        interval = $interval(function(){
            console.log("whatever");
        }, 1000);
    }

});

}]);