Как очистить или остановить timeInterval в angularjs?

Question

Как очистить или остановить timeInterval в angularjs?

Я делаю демо, в котором я получаю данные с сервера через регулярные промежутки времени с помощью $interval теперь мне нужно остановить / отменить это.

как я могу добиться этого? Если мне нужно перезапустить процесс, как я должен это делать?

во-вторых, у меня есть еще один вопрос: я получаю данные с сервера после reqular интервалов времени. Есть ли необходимость использовать $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

534 4

javascript angularjs angularjs-scope

4 ответов:

Comments

Ничего не найдено.

ryeballar · Accepted Answer · 2017-03-01 16:01:24

вы можете сохранить обещание, возвращенное интервалом, и использовать $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>

Arun Sharma · Accepted Answer · 2015-06-25 21:51:34

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

$interval.cancel(interval);

Jijo Paulose · Accepted Answer · 2016-02-26 10:18:11

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

Christian Bonato · Accepted Answer · 2016-11-12 21:01:53

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