$timeout

http://docs.angularjs.org/api/ng.$timeout

概要
依存関係
使用方法
cancel(promise)
デモ

概要

window.setTimeoutを使用するための、Angularのラッパーです。対象となる関数(fn)は、try/catchブロック内にラップされ、例外は$exceptionHandlerに委譲されます。

timeout関数を登録した際の戻り値はpromiseで、 timeoutが指定時間に達し、そのtimeout関数が実行された際にresolveされます。

timeoutのリクエストをキャンセルするには、$timeout.cancel(promise)を呼び出します。

テストでは、deferred関数のキューを同時に発生させるために、$timeout.flush()を使用することが出来ます。

依存関係

$browser

使用方法

$timeout(fn[, delay][, invokeApply]);

引数	説明
fn	型：`function()` 遅延して実行されるべき関数を指定します。
delay(optional)	型：`number` 初期値：`0` 遅延させる時間を、ミリ秒で指定します。
invokeApply(optional)	型：`boolean` 初期値：`true` もし、falseを設定するとモデルの「手つかず」チェックをスキップし、そうでなければ、$applyブロック内でfnを実行します。
戻り値	説明
&ngsp;	型：`Promise` timeoutが指定実感に達した際にresolveされるPromiseです。このpromiseがresolveされた際の値は、fnd関数の戻り値になります。

cancel(promise)

promiseに関連するタスクをキャンセルします。この結果として、promiseは「拒絶(reject)」としてresolveされます。

引数説明

promise(optional)

引数	説明
promise(optional)	型：`Promise` $timeout関数によって返されたPromiseを指定します。
戻り値	説明
	型：`boolean` タスクがまだ実行されておらず、キャンセルに成功した場合はtrueを返します。

型：Promise

$timeout関数によって返されたPromiseを指定します。

戻り値説明

型：boolean

タスクがまだ実行されておらず、キャンセルに成功した場合はtrueを返します。

<!doctype html>
<html ng-app="time">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <div>
      <div ng-controller="Ctrl2">
        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>
  </body>
</html>

function Ctrl2($scope,$timeout) {
  $scope.format = 'M/d/yy h:mm:ss a';
  $scope.blood_1 = 100;
  $scope.blood_2 = 120;

  var stop;
  $scope.fight = function() {
    stop = $timeout(function() {
      if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
          $scope.blood_1 = $scope.blood_1 - 3;
          $scope.blood_2 = $scope.blood_2 - 4;
          $scope.fight();
      } else {
          $timeout.cancel(stop);
      }
    }, 100);
  };

  $scope.stopFight = function() {
    $timeout.cancel(stop);
  };

  $scope.resetFight = function() {
    $scope.blood_1 = 100;
    $scope.blood_2 = 120;
  }
}

angular.module('time', [])
  // Register the 'myCurrentTime' directive factory method.
  // We inject $timeout and dateFilter service since the factory method is DI.
  .directive('myCurrentTime', function($timeout, dateFilter) {
    // return the directive link function. (compile function not needed)
    return function(scope, element, attrs) {
      var format,  // date format
      timeoutId; // timeoutId, 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();
      });

      // schedule update in one second
      function updateLater() {
        // save the timeoutId for canceling
        timeoutId = $timeout(function() {
          updateTime(); // update DOM
          updateLater(); // schedule another update
        }, 1000);
      }

      // listen on DOM destroy (removal) event, and cancel the next UI update
      // to prevent updating time ofter the DOM element was removed.
      element.bind('$destroy', function() {
        $timeout.cancel(timeoutId);
      });

      updateLater(); // kick off the UI update process.
    }
  });

<!doctype html>
<html ng-app="time">
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
<script>function Ctrl2($scope,$timeout) {
  $scope.format = 'M/d/yy h:mm:ss a';
  $scope.blood_1 = 100;
  $scope.blood_2 = 120;

  var stop;
  $scope.fight = function() {
    stop = $timeout(function() {
      if ($scope.blood_1 > 0 && $scope.blood_2 > 0) {
          $scope.blood_1 = $scope.blood_1 - 3;
          $scope.blood_2 = $scope.blood_2 - 4;
          $scope.fight();
      } else {
          $timeout.cancel(stop);
      }
    }, 100);
  };

  $scope.stopFight = function() {
    $timeout.cancel(stop);
  };

  $scope.resetFight = function() {
    $scope.blood_1 = 100;
    $scope.blood_2 = 120;
  }
}

angular.module('time', [])
  // Register the 'myCurrentTime' directive factory method.
  // We inject $timeout and dateFilter service since the factory method is DI.
  .directive('myCurrentTime', function($timeout, dateFilter) {
    // return the directive link function. (compile function not needed)
    return function(scope, element, attrs) {
      var format,  // date format
      timeoutId; // timeoutId, 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();
      });

      // schedule update in one second
      function updateLater() {
        // save the timeoutId for canceling
        timeoutId = $timeout(function() {
          updateTime(); // update DOM
          updateLater(); // schedule another update
        }, 1000);
      }

      // listen on DOM destroy (removal) event, and cancel the next UI update
      // to prevent updating time ofter the DOM element was removed.
      element.bind('$destroy', function() {
        $timeout.cancel(timeoutId);
      });

      updateLater(); // kick off the UI update process.
    }
  });
</script>
  </head>
  <body>
    <div>
      <div ng-controller="Ctrl2">
        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>
  </body>
</html>

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。