EVOLUTION-MANAGER

Edit File: $interval.html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/interval.js?message=docs($interval)%3A%20describe%20your%20change...#L10' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>

<a href='https://github.com/angular/angular.js/tree/v1.3.9/src/ng/interval.js#L10' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>

<header class="api-profile-header">
  <h1 class="api-profile-header-heading">$interval</h1>
  <ol class="api-profile-header-structure naked-list step-list">

<li>
      - service in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>

<div class="api-profile-description">
  <p>Angular&#39;s wrapper for <code>window.setInterval</code>. The <code>fn</code> function is executed every <code>delay</code>
milliseconds.</p>
<p>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 <code>count</code> iterations, or
run indefinitely if <code>count</code> is not defined. The value of the notification will be the
number of iterations that have run.
To cancel an interval, call <code>$interval.cancel(promise)</code>.</p>
<p>In tests you can use <a href="api/ngMock/service/$interval#flush"><code>$interval.flush(millis)</code></a> to
move forward by <code>millis</code> milliseconds and trigger any functions scheduled to run in that
time.</p>
<div class="alert alert-warning">
<strong>Note</strong>: 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&#39;s scope or a
directive&#39;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.
</div>
</div>

<div>

<h2 id="usage">Usage</h2>
    
      <p><code>$interval(fn, delay, [count], [invokeApply]);</code></p>

<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <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>
        <p>A function that should be called repeatedly.</p>

</td>
    </tr>
    
    <tr>
      <td>
        delay
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-number">number</a>
      </td>
      <td>
        <p>Number of milliseconds between each function call.</p>

</td>
    </tr>
    
    <tr>
      <td>
        count
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-number">number</a>
      </td>
      <td>
        <p>Number of times to repeat. If not set, or 0, will repeat
  indefinitely.</p>

<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>
        <p>If set to <code>false</code> skips model dirty checking, otherwise
  will invoke <code>fn</code> within the <a href="api/ng/type/$rootScope.Scope#$apply">$apply</a> block.</p>

<p><em>(default: true)</em></p>
      </td>
    </tr>
    
  </tbody>
</table>

</section>
    
    <h3>Returns</h3>
<table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-promise">promise</a></td>
    <td><p>A promise which will be notified on each iteration.</p>
</td>
  </tr>
</table>

<h2>Methods</h2>
<ul class="methods">
  <li id="cancel">
    <h3><p><code>cancel(promise);</code></p>

</h3>
    <div><p>Cancels a task associated with the <code>promise</code>.</p>
</div>

<h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        promise
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-promise">promise</a>
      </td>
      <td>
        <p>returned by the <code>$interval</code> function.</p>

</td>
    </tr>
    
  </tbody>
</table>

<h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a></td>
    <td><p>Returns <code>true</code> if the task was successfully canceled.</p>
</td>
  </tr>
</table>

</li>
  </ul>

<h2 id="example">Example</h2><p>

<div>
  <a ng-click="openPlunkr('examples/example-example108')" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

<div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;script&gt;&#10;  angular.module(&#39;intervalExample&#39;, [])&#10;    .controller(&#39;ExampleController&#39;, [&#39;$scope&#39;, &#39;$interval&#39;,&#10;      function($scope, $interval) {&#10;        $scope.format = &#39;M/d/yy h:mm:ss a&#39;;&#10;        $scope.blood_1 = 100;&#10;        $scope.blood_2 = 120;&#10;&#10;        var stop;&#10;        $scope.fight = function() {&#10;          // Don&#39;t start a new fight if we are already fighting&#10;          if ( angular.isDefined(stop) ) return;&#10;&#10;          stop = $interval(function() {&#10;            if ($scope.blood_1 &gt; 0 &amp;&amp; $scope.blood_2 &gt; 0) {&#10;              $scope.blood_1 = $scope.blood_1 - 3;&#10;              $scope.blood_2 = $scope.blood_2 - 4;&#10;            } else {&#10;              $scope.stopFight();&#10;            }&#10;          }, 100);&#10;        };&#10;&#10;        $scope.stopFight = function() {&#10;          if (angular.isDefined(stop)) {&#10;            $interval.cancel(stop);&#10;            stop = undefined;&#10;          }&#10;        };&#10;&#10;        $scope.resetFight = function() {&#10;          $scope.blood_1 = 100;&#10;          $scope.blood_2 = 120;&#10;        };&#10;&#10;        $scope.$on(&#39;$destroy&#39;, function() {&#10;          // Make sure that the interval is destroyed too&#10;          $scope.stopFight();&#10;        });&#10;      }])&#10;    // Register the &#39;myCurrentTime&#39; directive factory method.&#10;    // We inject $interval and dateFilter service since the factory method is DI.&#10;    .directive(&#39;myCurrentTime&#39;, [&#39;$interval&#39;, &#39;dateFilter&#39;,&#10;      function($interval, dateFilter) {&#10;        // return the directive link function. (compile function not needed)&#10;        return function(scope, element, attrs) {&#10;          var format,  // date format&#10;              stopTime; // so that we can cancel the time updates&#10;&#10;          // used to update the UI&#10;          function updateTime() {&#10;            element.text(dateFilter(new Date(), format));&#10;          }&#10;&#10;          // watch the expression, and update the UI on change.&#10;          scope.$watch(attrs.myCurrentTime, function(value) {&#10;            format = value;&#10;            updateTime();&#10;          });&#10;&#10;          stopTime = $interval(updateTime, 1000);&#10;&#10;          // listen on DOM destroy (removal) event, and cancel the next UI update&#10;          // to prevent updating time after the DOM element was removed.&#10;          element.on(&#39;$destroy&#39;, function() {&#10;            $interval.cancel(stopTime);&#10;          });&#10;        }&#10;      }]);&#10;&lt;/script&gt;&#10;&#10;&lt;div&gt;&#10;  &lt;div ng-controller=&quot;ExampleController&quot;&gt;&#10;    Date format: &lt;input ng-model=&quot;format&quot;&gt; &lt;hr/&gt;&#10;    Current time is: &lt;span my-current-time=&quot;format&quot;&gt;&lt;/span&gt;&#10;    &lt;hr/&gt;&#10;    Blood 1 : &lt;font color=&#39;red&#39;&gt;{{blood_1}}&lt;/font&gt;&#10;    Blood 2 : &lt;font color=&#39;red&#39;&gt;{{blood_2}}&lt;/font&gt;&#10;    &lt;button type=&quot;button&quot; data-ng-click=&quot;fight()&quot;&gt;Fight&lt;/button&gt;&#10;    &lt;button type=&quot;button&quot; data-ng-click=&quot;stopFight()&quot;&gt;StopFight&lt;/button&gt;&#10;    &lt;button type=&quot;button&quot; data-ng-click=&quot;resetFight()&quot;&gt;resetFight&lt;/button&gt;&#10;  &lt;/div&gt;&#10;&lt;/div&gt;</code></pre>
    </div>

</p>

</div>