如何清除或停止时间间隔在 angularjs？

我正在做一个演示，其中我正在从服务器获取数据后，定期间隔的时间使用 $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

113211 次浏览
小开
最佳答案

You can store the promise returned by the interval and use $interval.cancel() to that promise, which cancels the interval of that promise. To delegate the starting and stopping of the interval, you can create start() and stop() functions whenever you want to stop and start them again from a specific event. I have created a snippet below showing the basics of starting and stopping an interval, by implementing it in view through the use of events (e.g. ng-click) and in the controller.

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>

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


$interval.cancel(interval);
小开 
var promise = $interval(function(){
if($location.path() == '/landing'){
$rootScope.$emit('testData',"test");
$interval.cancel(promise);
}
},2000);
小开 
    $scope.toggleRightDelayed = function(){
var myInterval = $interval(function(){
$scope.toggleRight();
},1000,1)
.then(function(){
$interval.cancel(myInterval);
});
};
小开

When you want to create interval store promise to variable:

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

And when you want to stop / clear the interval simply use:

$interval.cancel(p);

提交答案