©
This document uses PHP Chinese website manual Release
Angular's wrapper for window.setInterval. The fn function is executed every delay milliseconds.
The return value of registering an interval function is a promise. This promise will be notified upon each tick of the interval, and will be resolved after count iterations, or run indefinitely if count is not defined. The value of the notification will be the number of iterations that have run. To cancel an interval, call $interval.cancel(promise).
In tests you can use $interval.flush(millis) to move forward by millis milliseconds and trigger any functions scheduled to run in that time.
$interval(fn, delay, [count], [invokeApply]);
| 参数 | 类型 | 详述 |
|---|---|---|
| fn | function() | A function that should be called repeatedly. |
| delay | number | Number of milliseconds between each function call. |
| count
(可选)
|
number | Number of times to repeat. If not set, or 0, will repeat indefinitely. |
| invokeApply
(可选)
|
boolean | If set to |
| promise | A promise which will be notified on each iteration. |
cancel(promise);
Cancels a task associated with the promise.
| 参数 | 类型 | 详述 |
|---|---|---|
| promise | promise | returned by the |
| boolean | 返回值 |
<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 nis 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">
Date format: <input ng-model="format"> <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>