如何在angularjs中清除或停止timeInterval？答案

【问题标题】：How to clear or stop timeInterval in angularjs?如何在angularjs中清除或停止timeInterval？
【发布时间】：2014-12-14 09:20:15
【问题描述】：

我正在制作一个演示，在该演示中我使用$interval 在定期的时间间隔后从服务器获取数据现在我需要停止/取消它。

我怎样才能做到这一点？如果我需要重新启动进程，我应该怎么做？

其次，我还有一个问题：我在定期的时间间隔后从服务器获取数据。有没有必要用$scope.apply或者$scope.watch？

这是我的笨蛋：

  app.controller('departureContrl',function($scope,test, $interval){
   setData();

   $interval(setData, 1000*30);

   function setData(){
      $scope.loading=true;
    test.stationDashBoard(function(data){
        console.log(data);
        $scope.data=data.data;
        $scope.loading=false;
        //alert(data);
    },function(error){
        alert('error')
    }) ;

   }
});

http://plnkr.co/edit/ly43m5?p=preview

【问题讨论】：

标签： javascript angularjs angularjs-scope

【解决方案1】：

您可以存储由区间返回的承诺并将$interval.cancel() 用于该承诺，这将取消该承诺的区间。要委托间隔的开始和停止，您可以创建 start() 和 stop() 函数，只要您想从特定事件停止并再次启动它们。我在下面创建了一个 sn-p，通过使用事件（例如 ng-click）和在控制器中实现它来显示启动和停止间隔的基础知识。

angular.module('app', [])

  .controller('ItemController', function($scope, $interval) {
  
    // store the interval promise in this variable
    var promise;
  
    // simulated items array
    $scope.items = [];
    
    // starts the interval
    $scope.start = function() {
      // stops any running interval to avoid two intervals running at the same time
      $scope.stop(); 
      
      // store the interval promise
      promise = $interval(setRandomizedCollection, 1000);
    };
  
    // stops the interval
    $scope.stop = function() {
      $interval.cancel(promise);
    };
  
    // starting the interval by default
    $scope.start();
 
    // stops the interval when the scope is destroyed,
    // this usually happens when a route is changed and 
    // the ItemsController $scope gets destroyed. The
    // destruction of the ItemsController scope does not
    // guarantee the stopping of any intervals, you must
    // be responsible for stopping it when the scope is
    // is destroyed.
    $scope.$on('$destroy', function() {
      $scope.stop();
    });
            
    function setRandomizedCollection() {
      // items to randomize 1 - 11
      var randomItems = parseInt(Math.random() * 10 + 1); 
        
      // empties the items array
      $scope.items.length = 0; 
      
      // loop through random N times
      while(randomItems--) {
        
        // push random number from 1 - 10000 to $scope.items
        $scope.items.push(parseInt(Math.random() * 10000 + 1)); 
      }
    }
  
  });

<div ng-app="app" ng-controller="ItemController">
  
  <!-- Event trigger to start the interval -->
  <button type="button" ng-click="start()">Start Interval</button>
  
  <!-- Event trigger to stop the interval -->
  <button type="button" ng-click="stop()">Stop Interval</button>
  
  <!-- display all the random items -->
  <ul>
    <li ng-repeat="item in items track by $index" ng-bind="item"></li>
  </ul>
  <!-- end of display -->
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

【讨论】：

@thanks for reply ..当我从服务定期间隔获取数据时是否需要添加应用或观看
不，如果您使用的是$interval 服务，则不需要使用apply()，因为它会为您服务。但如果您使用的是内置的setInterval()，那么您可能必须使用$scope.$apply()。
非常好的解决方案。 $destroy 与 http-auth-interceptor 一起工作得很好，就像我想在身份验证失败期间停止间隔（如过期会话）并在成功身份验证后重新开始。感谢您提供这个出色的解决方案。

【解决方案2】：

var interval = $interval(function() {
  console.log('say hello');
}, 1000);

$interval.cancel(interval);

【讨论】：

【解决方案3】：

var promise = $interval(function(){
    if($location.path() == '/landing'){
        $rootScope.$emit('testData',"test");
        $interval.cancel(promise);
    }
},2000);

【讨论】：

由于 URL 将来可能会发生变化，我会在使用 $location.path() 而不是州名之前三思而后行

【解决方案4】：

当你想为变量创建间隔存储承诺时：

var p = $interval(function() { ... },1000);

当您想停止/清除间隔时，只需使用：

$interval.cancel(p);

【讨论】：

【解决方案5】：

    $scope.toggleRightDelayed = function(){
        var myInterval = $interval(function(){
            $scope.toggleRight();
        },1000,1)
        .then(function(){
            $interval.cancel(myInterval);
        });
    };

【讨论】：