AngularJS $interval Service

The AngularJS $interval service is similar to JavaScript's window.setInterval function. In angular it is refer to it through the $interval service. The $interval is just wrapper for window.setInterval function so that it will be easy to override, remove or mocked for testing.

The $interval service is executed provided function on every delay milliseconds.

Syntax

$interval(functionName, 1000);

AngularJS $interval Service Example 1

<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> 
    <meta charset="utf-8">
    <title>AngularJS $interval Example</title>
  <script>
var app = angular.module('app', []);
    app.controller("IntrevalController", function ($scope, $interval) {
      $scope.counter = 0;
      $scope.Counter = function () {
        $scope.counter = $scope.counter + 1;
      }
       $scope.StartCounter = function () {
        $interval($scope.Counter, 1000); 
       }
    });
</script>
</head>
<body style="background-color:#DDE4E9;">
  <fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS $interval Service Example</legend> 
  <div ng-app="app">      
    <div ng-controller="IntrevalController">      
        <button ng-click="StartCounter()">Start Counter</button>     
     <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"
	 >Counter : - {{counter}}</p> 
      
    </div>      
</div>
 </fieldset> 
</body>
</html>

See Live Example

Specify Count

The $interval service also allows to specify the count parameter. The specified function executes number of times as count parameter.

Syntax

$interval(increaseCounter, 1000, 10);

AngularJS $interval Service Example 2

<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> 
    <meta charset="utf-8">
    <title>AngularJS $interval with counter parameter Example</title>
  <script>
var app = angular.module('app', []);
    app.controller("IntrevalController", function ($scope, $interval) {
      $scope.counter = 0;
      $scope.Counter = function () {
        $scope.counter = $scope.counter + 1;
      }
       $scope.StartCounter = function () {
        $interval($scope.Counter, 1000, 10); 
       }
    });
</script>
</head>
<body style="background-color:#DDE4E9;">
  <fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS $interval Service with counter parameter Example</legend> 
  <div ng-app="app">      
    <div ng-controller="IntrevalController">      
        <button ng-click="StartCounter()">Start Counter</button>
     <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"
	 >Counter : - {{counter}}</p> 
      
    </div>      
</div>
 </fieldset> 
</body>
</html>

See Live Example

Cancel Execution

The $interval service returns a promise which will be notified on each iteration, which can be used to stop or cancel the task by using $interval.cancel(promise) method.

Syntax

var promise = $interval(Counter, 1000);
$interval.cancel(promise);

AngularJS $interval Service Example 3

<!DOCTYPE html>
<html>
<head> <!-- www.techstrikers.com -->
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script> 
    <meta charset="utf-8">
    <title>AngularJS $interval Cancel Example</title>
  <script>
var app = angular.module('app', []);
    app.controller("IntrevalController", function ($scope, $interval) {
      $scope.counter = 0;
      $scope.promise = '';
      $scope.Counter = function () {
        $scope.counter = $scope.counter + 1;
      }
       $scope.StartCounter = function () {
         $scope.promise = $interval($scope.Counter, 1000);
       }
       $scope.CancelCounter = function () {
         $interval.cancel($scope.promise);
         $scope.counter = 0;
       }
    });
</script>
</head>
<body style="background-color:#DDE4E9;">
  <fieldset style="background-color:#DDE4E9;">            
    <legend>AngulerJS $interval Service Cancel Task Example</legend> 
  <div ng-app="app">      
    <div ng-controller="IntrevalController">      
        <button ng-click="StartCounter()">Start Counter</button>  
      <button ng-click="CancelCounter()">Cancel Counter</button>  
      
     <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"
	 >Counter : - {{counter}}</p> 
      
    </div>      
</div>
 </fieldset> 
</body>
</html>

See Live Example

« Previous