AngularJS $interval Service

Last Updated : 23 Jan, 2023

The $interval service in AngularJS is a function that allows you to execute a function repeatedly at a specified interval. It is similar to the setInterval function in JavaScript, but it is designed to work seamlessly with the AngularJS framework.

To use the $interval service, it is first needed to inject it into the AngularJS component as a dependency. For example, it can be injected into a controller like this:

angular.module('myModule', [])
  .controller('MyController', function($scope, $interval) {
    // Use the $interval service here
  });

Syntax:

angular.module('myModule', [])
  .controller('MyController', function($scope, $interval) {

    var interval = $interval(function() {
     //code
    }, delay, count);  
  });

Parameters: The $interval service in AngularJS takes the following arguments:

fn (function): The function to be executed at the specified interval.
delay (number): The interval in milliseconds at which the function should be executed.
count (number, optional): The number of times the function should be executed. If this argument is not specified, the function will be executed indefinitely until it is canceled.

Return type: A Promise will be returned while notifying for each iteration & will be resolved once each iteration of the interval got completed.

Approach 1: Here, we have an AngularJS application with a single controller, MyController. We have injected the $interval service into the controller as a dependency, and we have defined a countdown variable that is set to 10. We have also defined a finished flag that is initially set to false.

We are using the $interval service to execute a function every 1000 milliseconds (1 second). The function decreases the value of the countdown by 1 each time it is called, and it cancels the interval when the countdown reaches 0. When the countdown reaches 0, the finished flag is set to true. The value of the countdown is displayed on the page using an expression in the first p element, and the message “The countdown is finished!” is displayed when the `finished.

Example 1: This example describes the basic implementation of the $interval service in AngularJS, where we have defined a countdown variable & set it to 10.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> 
    </script> 
    <style> 
        h1 { 
            color: green; 
        } 
    </style> 
</head> 
  
<body ng-controller="MyController"> 
    <center> 
        <h1> GeeksforGeeks</h1> 
        <h3> 
            AngularJS $interval service 
        </h3> 
        <p ng-if="!finished">Countdown: {{countdown}}</p> 
        <p ng-if="finished">The countdown is finished!</p> 
    </center> 
    <script> 
        angular.module('myApp', []) 
            .controller('MyController', function ($scope, $interval) { 
                $scope.countdown = 10; 
                $scope.finished = false; 
  
                var interval = $interval(function () { 
                    $scope.countdown--; 
                    if ($scope.countdown === 0) { 
                        $interval.cancel(interval); 
                        $scope.finished = true; 
                    } 
                }, 1000); 
            }); 
    </script> 
</body> 
  
</html>

Output:

Approach 2: Here, we have an AngularJS application with a single controller, MyController. We have injected the $interval service into the controller as a dependency, and we have defined the following variables and functions:

elapsedTime: A variable that tracks the elapsed time in seconds.
running: A flag that indicates whether the stopwatch is running.
start: A function that starts the stopwatch.
stop: A function that stops the stopwatch.
reset: A function that stops the stopwatch and resets the elapsed time to 0.

Example 2: This is another basic example that describes the implementation of AngularJS $interval service, where we have created a elapsed Timer with start, reset & stop buttons.

HTML

<!DOCTYPE html> 
<html ng-app="myApp"> 
  
<head> 
    <style> 
        .green { 
            color: green; 
        } 
  
        .black { 
            color: black; 
        } 
  
        h1 { 
            color: green 
        } 
  
        button { 
            color: white; 
            background-color: black; 
            height: 30px; 
            width: 100px; 
            padding: 3px; 
            margin: 5px; 
            border-radius: 5px; 
        } 
    </style> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"> 
    </script> 
    <script> 
        angular.module('myApp', []) 
            .controller('MyController', function ($scope, $interval) { 
                $scope.elapsedTime = 0; 
                $scope.running = false; 
  
                var interval; 
  
                $scope.start = function () { 
                    if (!$scope.running) { 
                        interval = $interval(function () { 
                            $scope.elapsedTime++; 
                        }, 1000); 
                        $scope.running = true; 
                    } 
                } 
  
                $scope.stop = function () { 
                    if ($scope.running) { 
                        $interval.cancel(interval); 
                        $scope.running = false; 
                    } 
                } 
  
                $scope.reset = function () { 
                    $scope.stop(); 
                    $scope.elapsedTime = 0; 
                } 
            }); 
    </script> 
</head> 
  
<body ng-controller="MyController"> 
    <center> 
        <h1> GeeksforGeeks</h1> 
        <h3>AngularJS $interval service</h3> 
        <p ng-class= 
"{'green': elapsedTime % 2 == 0, 'black': elapsedTime % 2 == 1}"> 
        Elapsed Time: {{elapsedTime}} seconds 
        </p> 
        <button ng-click="start()" 
                ng-disabled="running"> 
                Start 
        </button> 
        <button ng-click="stop()" 
                ng-disabled="!running"> 
                Stop 
        </button> 
        <button ng-click="reset()"> 
            Reset 
        </button> 
    </center> 
</body> 
  
</html