如何清除或angularjs停止时间间隔内？ [英] How to clear or stop timeInterval in angularjs?

问题描述

我正在在我从服务器后的时间定期使用 $间隔现在我需要停止/取消取数据的演示。

我怎样才能做到这一点？如果我需要重新启动的过程中，我应该怎么做呢？

其次，我有一个问题：我是从服务器的时间间隔reqular后获取数据。有没有必要使用 $ scope.apply 或 $ scope.watch ？

下面是我的plunker：

  app.controller（'departureContrl'，函数（$范围，测试$间隔）{
   使用setData（）;   $间隔（使用setData，1000 * 30）;   功能使用setData（）{
      $ scope.loading = TRUE;
    test.stationDashBoard（功能（数据）{
        的console.log（数据）;
        $ scope.data =数据。数据;
        $ scope.loading = FALSE;
        //警报（数据）;
    }，功能（错误）{
        警报（'错误'）
    }）;   }
}）;
 

http://plnkr.co/edit/ly43m5?p=$p$pview

解决方案

您可以通过保存的时间间隔返回的承诺，并使用 $ interval.cancel（）这一承诺，这将取消这一承诺的时间间隔。要委派间隔的启动和停止，您可以创建的start（）和停止（）功能，每当你想停止并从一个特定的事件再次启动它们。我创建了下面显示的出发基础知识和停止的时间间隔，通过利用事件的 NG-点击并在控制器实现它在视图中的片段。

\r

\r

angular.module（应用，[]）\r
\r
  .controller（'ItemController'，函数（$范围，$间隔）{\r
  \r
    //存储在这个变量区间承诺\r
    VAR的承诺;\r
  \r
    //模拟项目数组\r
    $ scope.items = [];\r
    \r
    //开始的时间间隔\r
    $ scope.start =功能（）{\r
      //停止所有正在运行的间隔，以避免在同一时间运行两个区间\r
      $ scope.stop（）;\r
      \r
      //保存时间间隔承诺\r
      诺= $区间（setRandomizedCollection，1000）;\r
    };\r
  \r
    //停止间隔\r
    $ scope.stop =功能（）{\r
      $ interval.cancel（承诺）;\r
    };\r
  \r
    //开始默认间隔\r
    $ scope.start（）;\r
 \r
    //停止的时间间隔时的范围被破坏，\r
    //当路由改变这种通常发生和\r
    //将ItemsController $范围被摧毁。该\r
    //将ItemsController范围的破坏不\r
    //保证任何时间间隔的停止，你必须\r
    //负责停止它时的范围是\r
    //被破坏。\r
    $范围。在$（'$破坏'，函数（）{\r
      $ scope.stop（）;\r
    }）;\r
            \r
    功能setRandomizedCollection（）{\r
      //物品随机1 - 11\r
      变种randomItems = parseInt函数（的Math.random（）* 10 + 1）;\r
        \r
      //清空项目数组\r
      $ scope.items.length = 0;\r
      \r
      //通过随机N次循环\r
      而（randomItems--）{\r
        \r
        //从1推随机数 - 10000到$ scope.items\r
        $ scope.items.push（parseInt函数（的Math.random（）* 10000 + 1））;\r
      }\r
    }\r
  \r
  }）;

\r

＆LT; D​​IV NG-应用=应用程序NG控制器=ItemController ＆GT;\r
  \r
  ＆LT;！ - 事件触发启动间隔 - ＆GT;\r
  ＆LT;按钮式=按钮NG点击=开始（）＆GT;发车间隔＆LT; /按钮＆GT;\r
  \r
  ＆LT;！ - 事件触发停止的时间间隔 - ＆GT;\r
  ＆LT;按钮式=按钮NG点击=停止（）＆GT;停止间隔＆LT; /按钮＆GT;\r
  \r
  ＆LT;！ - 显示所有的随机项目 - ＆GT;\r
  ＆LT; UL＆GT;\r
    ＆LT;李NG重复=中的项项跟踪由$指数NG绑定=项＆GT;＆LT; /李＆GT;\r
  ＆LT; / UL＆GT;\r
  ＆LT;！ - 显示器端 - ＆GT;\r
＆LT; / DIV＆GT;\r
\r
＆LT;脚本src=\"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js\"></script>\r


\r


\r

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 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 of 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停止时间间隔内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！