ng.$timeout.html

<a href="http://github.com/angular/angular.js/tree/v1.2.3/src/ng/timeout.js#L10" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/timeout.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">$timeout</code>
<div><span class="hint">service in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><h2 id="description">Description</h2>
<div class="description"><div class="ng-timeout-page"><p>Angular&#39;s wrapper for <code>window.setTimeout</code>. The <code>fn</code> function is wrapped into a try/catch
block and delegates any exceptions to
<a href="api/ng.$exceptionHandler"><code>$exceptionHandler</code></a> service.</p>
<p>The return value of registering a timeout function is a promise, which will be resolved when
the timeout is reached and the timeout function is executed.</p>
<p>To cancel a timeout request, call <code>$timeout.cancel(promise)</code>.</p>
<p>In tests you can use <a href="api/ngMock.$timeout"><code>$timeout.flush()</code></a> to
synchronously flush the queue of deferred functions.</p>
</div></div>
<h2 id="dependencies">Dependencies</h2>
<ul class="dependencies"><li><code ng:non-bindable=""><a href="api/ng.$browser">$browser</a></code>
</li>
</ul>
<h2 id="usage">Usage</h2>
<div class="usage"><pre class="prettyprint linenums">$timeout(fn[, delay][, invokeApply]);</pre>
<h4 id="usage_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>fn</td><td><a href="" class="label type-hint type-hint-function">function()</a></td><td><div class="ng-timeout-page"><p>A function, whose execution should be delayed.</p>
</div></td></tr><tr><td>delay <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-number">number</a></td><td><div class="ng-timeout-page"><p>Delay in milliseconds.</p>
</div> <p><em>(default: 0)</em></p></td></tr><tr><td>invokeApply <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="ng-timeout-page"><p>If set to <code>false</code> skips model dirty checking, otherwise
will invoke <code>fn</code> within the <a href="api/ng.$rootScope.Scope#methods_$apply"><code>$apply</code></a> block.</p>
</div> <p><em>(default: true)</em></p></td></tr></tbody></table><h4 id="usage_returns">Returns</h4><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-promise">Promise</a></td><td><div class="ng-timeout-page"><p>Promise that will be resolved when the timeout is reached. The value this
promise will be resolved with is the return value of the <code>fn</code> function.</p>
</div></td></tr></table></div>
<div class="member method"><h2 id="methods">Methods</h2>
<ul class="methods"><li><h3 id="methods_cancel">cancel(promise)</h3>
<div class="cancel"><div class="ng-timeout-cancel-page"><p>Cancels a task associated with the <code>promise</code>. As a result of this, the promise will be
resolved with a rejection.</p>
</div><h5 id="methods_cancel_parameters">Parameters</h5><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>promise <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-promise">Promise</a></td><td><div class="ng-timeout-cancel-page"><p>Promise returned by the <code>$timeout</code> function.</p>
</div></td></tr></tbody></table><h5 id="methods_cancel_returns">Returns</h5><table class="variables-matrix"><tr><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="ng-timeout-cancel-page"><p>Returns <code>true</code> if the task hasn&#39;t executed yet and was successfully
canceled.</p>
</div></td></tr></table></div>
</li>
</ul>
</div>
<h2 id="example">Example</h2>
<div class="example"><div class="ng-timeout-page"><h4 id="example_source">Source</h4>
<div source-edit="time" source-edit-deps="angular.js script.js" source-edit-html="index.html-147" source-edit-css="" source-edit-js="script.js-146" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-147" ng-html-wrap="time angular.js script.js"></pre>
<script type="text/ng-template" id="index.html-147">
  

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

</script>
</div>
<div class="tab-pane" title="script.js">
<pre class="prettyprint linenums" ng-set-text="script.js-146"></pre>
<script type="text/ng-template" id="script.js-146">
    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>
</div>
</div><h4 id="example_demo">Demo</h4>
<div class="well doc-example-live animate-container" ng-embed-app="time" ng-set-html="index.html-147" ng-eval-javascript="script.js-146"></div>
</div></div>
</div>