2014-10-19 69 views
81

我正在做一個演示,我正在使用$interval定期的時間間隔從服務器獲取數據。現在我需要停止/取消這個。如何清除或停止angularjs中的timeInterval?

我該如何做到這一點?如果我需要重新啓動流程,我應該怎麼做?其次,我還有一個問題:我在時間間隔後從服務器獲取數據。有沒有必要使用$scope.apply$scope.watch

這裏是我的plunker:

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

回答

129

可以存儲由間隔返回的承諾,用$interval.cancel()這一承諾,這將取消這一承諾的時間間隔。要委派時間間隔的開始和停止,您可以創建start()stop()函數,只要您想停止並從特定事件再次啓動它們即可。我在下面創建了一個片段,通過在事件(例如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>

+0

@thanks答覆..是有什麼需要補充申請,或者當我從服務reqular的時間間隔獲取時間 – user944513 2014-10-19 06:54:38

+0

不,你看數據如果您使用'$ interval'服務,則不需要使用'apply()',因爲它可以爲您提供服務。但是如果你使用內建的'setInterval()',那麼你可能不得不使用'$ scope。$ apply()'。 – ryeballar 2014-10-19 07:00:24

+0

非常好的解決方案。 ''destroy'和'http-auth-interceptor'一起工作良好,就像我想在auth失敗期間停止時間間隔(如過期會話)並在成功驗證後再次啓動一樣。感謝您提供這個出色的解決方案。 – Neel 2015-11-14 15:26:38

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

$interval.cancel(interval); 
+0

簡單明瞭的解決方案,完美的工作 – 2017-05-27 21:14:17

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

因爲URL可能會在將來發生變化,所以在使用'$ location.path()'之前我會考慮三次,而不是狀態名 – 2016-06-15 08:17:14

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