如何清除或停止angularjs中的timeInterval？

Question

我正在制作一个演示，其中我将使用固定时间间隔从服务器上获取数据，$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

Answer 1

您可以存储间隔返回的承诺并用于$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>