如何清除或停止angularjs中的timeInterval? [英] How to clear or stop timeInterval in angularjs?

问题描述

我正在制作一个演示，其中我使用 $interval 在定期间隔后从服务器获取数据，现在我需要停止/取消此操作.

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

其次，我还有一个问题:我在固定的时间间隔后从服务器获取数据.是否需要使用 $scope.apply 或 $scope.watch ?

这是我的plunker:

 app.controller('departureContrl',function($scope,test, $interval){设置数据()；$interval(setData, 1000*30);函数集数据(){$scope.loading=true;test.stationDashBoard(功能(数据){控制台日志(数据)；$scope.data=data.data;$scope.loading=false;//警报(数据)；},函数(错误){警报('错误')});}});

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

解决方案

你可以存储interval返回的promise，然后对那个promise使用$interval.cancel()，这样就取消了interval的interval那个承诺.要委托间隔的开始和停止，您可以创建 start() 和 stop() 函数，只要您想从特定事件停止和重新启动它们.我在下面创建了一个片段，显示了开始和停止间隔的基础知识，通过使用事件(例如 ng-click)和控制器在视图中实现它.

angular.module('app', []).controller('ItemController', function($scope, $interval) {//在这个变量中存储区间承诺无功承诺；//模拟物品数组$scope.items = [];//开始间隔$scope.start = function() {//停止任何运行间隔以避免两个间隔同时运行$scope.stop();//存储间隔承诺承诺 = $interval(setRandomizedCollection, 1000);};//停止间隔$scope.stop = function() {$interval.cancel(承诺)；};//默认开始间隔$scope.start();//当作用域被销毁时停止间隔，//这通常发生在路由改变时//ItemsController $scope 被销毁.这//ItemsController 作用域的销毁不会//保证任何间隔的停止，你必须//负责在范围为时停止它//被销毁.$scope.$on('$destroy', function() {$scope.stop();});函数 setRandomizedCollection() {//要随机化 1 - 11 的项目var randomItems = parseInt(Math.random() * 10 + 1);//清空items数组$scope.items.length = 0;//循环随机 N 次而(随机项目--){//将 1 - 10000 之间的随机数推送到 $scope.items$scope.items.push(parseInt(Math.random() * 10000 + 1));}}});

<!-- 开始间隔的事件触发器--><button type="button" ng-click="start()">开始间隔</button><!-- 事件触发停止间隔--><button type="button" ng-click="stop()">停止间隔</button><!-- 显示所有随机项目--><ul><li ng-repeat="item in items track by $index" ng-bind="item"></li><!-- 显示结束-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

I am making a demo in which I am fetching data from the server after regular intervals of time using $interval Now I need to stop/cancel this.

How I can achieve this? If I need to restart the process, how should I do that?

Secondly, I have one more question: I am fetching data from the server after reqular intervals of time. Is there any need to use $scope.apply or $scope.watch?

Here is my 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

解决方案

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>

这篇关于如何清除或停止angularjs中的timeInterval?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！