In this article I will explain how to use the AngularJS $interval function to perform a task periodically at regular intervals with a delay of specific time period. The AngularJS $interval makes use of the JavaScript setInterval method and works in the exact same way.
Just like the JavaScript setInterval method, we can also Start, Stop and Cancel (Destroy) the AngularJS $interval function.
 
 
AngularJS $interval example: How to Start, Stop and Cancel (Destroy) $interval in AngularJS
The below HTML Markup consists of an HTML DIV to which ng-app and ng-controller AngularJS directives have been assigned.
Note: If you want to learn more about these directives, please refer my article Introduction to AngularJS.
The AngularJS app HTML DIV consists of an HTML DIV and two Buttons. The HTML DIV has been assigned ng-bind directive to display messages.
The two Buttons are assigned ng-click directive. When the Start Timer Button is clicked, the StartTimer function of the Controller gets called and when the Stop Timer Button is clicked, the StopTimer function of the Controller gets called.
Note: If you want to learn more about ng-click directive, please refer my article ng-click directive example.
 
The $interval function
The AngularJS $interval function executes a function periodically at regular intervals with specific time delay. The $interval function will keep executing the function until it is cancelled.
 
Starting the $interval function
The $interval function accepts two parameters:
1. The function to be executed.
2. The time delay in Milliseconds.
The $interval function returns the object which can be later used to Stop and Cancel (Destroy) the $interval function.
 
Stop and Cancel (Destroy) the $interval function
The $interval function can be cancelled by making use of its cancel method which accepts the object of the $interval function to be cancelled.
 
In the following example, when the Start Timer button is clicked, a Message is set as to indicate that the Timer has started and also a $interval function is initialized to display Current Time in the HTML DIV every one second.
When the Stop Timer button is clicked, a Message is set to indicate that the Timer has stopped and the Timer is cancelled.
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $interval, $filter) {
            //Initiate the Timer object.
            $scope.Timer = null;
 
            //Timer start function.
            $scope.StartTimer = function () {
                //Set the Timer start message.
                $scope.Message = "Timer started. ";
 
                //Initialize the Timer to run every 1000 milliseconds i.e. one second.
                $scope.Timer = $interval(function () {
                    //Display the current time.
                    var time = $filter('date')(new Date(), 'HH:mm:ss');
                    $scope.Message = "Timer Ticked. " + time;
                }, 1000);
            };
 
            //Timer stop function.
            $scope.StopTimer = function () {
 
                //Set the Timer stop message.
                $scope.Message = "Timer stopped.";
 
                //Cancel the Timer.
                if (angular.isDefined($scope.Timer)) {
                    $interval.cancel($scope.Timer);
                }
            };
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div ng-bind = "Message">
        </div>
        <br />
        <input type="button" value="Start Timer" ng-click="StartTimer()" />
        <input type="button" value="Stop Timer" ng-click="StopTimer()" />
    </div>
</body>
</html>
 
 
Screenshot
AngularJS $interval example: How to Start, Stop and Cancel (Destroy) $interval in AngularJS
 
 
Demo
View Demo
 
 
Downloads
Download Code