javascript - .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吗？如果是这样，您需要取消interval如果路线authenticate不再。

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

var stopTime = $interval(DoJob, 1000);

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

见文档_$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 之前取消之前的 $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);
    }

});

}]);