AngularJS: API: ng/service/$interval

$interval

- service in module ng

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.

注意: Intervals created by this service must be explicitly destroyed when you are finished with them. In particular they are not automatically destroyed when a controller's scope or a directive's element are destroyed. You should take this into consideration and make sure to always cancel the interval at the appropriate moment. See the example below for more details on how and when to do this.

用法

$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 `false` skips model dirty checking, otherwise will invoke `fn` within the $apply block.

返回值

promise

A promise which will be notified on each iteration.

方法

cancel(promise);

Cancels a task associated with the promise.

参数

参数类型详述

promise promise
returned by the $interval function.

返回值

boolean
返回值true if the task was successfully canceled.

参数	类型	详述
promise	promise	returned by the `$interval` function.

示例

index.html

<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>