当前位置:AngularJS API / ng / 服务(service) / $interval
$interval
window.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。
间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知,并且到达规定迭代次数后被取消,如果迭代次数未定义,则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔,调用$intreval.cancel(promise)。
备注:当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。
参数 | 类型 | 描述 |
---|---|---|
fn | function() |
一个将被反复执行的函数。 |
delay | number |
每次调用的间隔毫秒数值。 |
count | number |
循环次数的数值,如果没设置,则无限制循环。 |
invokeApply | boolean |
如果设置为false,则避开脏值检查,否则将调用$apply。 |
Pass | * |
函数的附加参数。 |
取消与承诺相关联的任务。
参数 | 类型 | 描述 |
---|---|---|
promise | Promise |
$interval函数的返回值。 |
<script> angular.module('intervalExample', []) .controller('ExampleController', ['$scope', '$interval', function($scope, $interval) { $scope.format = 'M/d/yy h:mm:ss a'; $scope.blood_1 = 100; $scope.blood_2 = 120; var stop; $scope.fight = function() { // Don't start a new fight if we are already fighting if ( angular.isDefined(stop) ) return; stop = $interval(function() { if ($scope.blood_1 > 0 && $scope.blood_2 > 0) { $scope.blood_1 = $scope.blood_1 - 3; $scope.blood_2 = $scope.blood_2 - 4; } else { $scope.stopFight(); } }, 100); }; $scope.stopFight = function() { if (angular.isDefined(stop)) { $interval.cancel(stop); stop = undefined; } }; $scope.resetFight = function() { $scope.blood_1 = 100; $scope.blood_2 = 120; }; $scope.$on('$destroy', function() { // Make sure that the interval is destroyed too $scope.stopFight(); }); }]) // Register the 'myCurrentTime' directive factory method. // We inject $interval and dateFilter service since the factory method is DI. .directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) { // return the directive link function. (compile function not needed) return function(scope, element, attrs) { var format, // date format stopTime; // so that we can cancel the time updates // used to update the UI function updateTime() { element.text(dateFilter(new Date(), format)); } // watch the expression, and update the UI on change. scope.$watch(attrs.myCurrentTime, function(value) { format = value; updateTime(); }); stopTime = $interval(updateTime, 1000); // listen on DOM destroy (removal) event, and cancel the next UI update // to prevent updating time after the DOM element was removed. element.on('$destroy', function() { $interval.cancel(stopTime); }); } }]); </script> <div> <div ng-controller="ExampleController"> <label>Date format: <input ng-model="format"></label> <hr/> Current time is: <span my-current-time="format"></span> <hr/> Blood 1 : <font color='red'>{{blood_1}}</font> Blood 2 : <font color='red'>{{blood_2}}</font> <button type="button" data-ng-click="fight()">Fight</button> <button type="button" data-ng-click="stopFight()">StopFight</button> <button type="button" data-ng-click="resetFight()">resetFight</button> </div> </div>