$timeout and $interval services in AngularJS

In AngularJS, $timeout and $interval are built-in services used to handle delayed execution and repeated execution of functions. These services help in scenarios like:

• Delaying function execution
• Running a function at regular intervals
• Stopping an ongoing execution
• Creating animations or UI updates after a delay

This guide covers:

What $timeout and $interval are
How to use them with examples
Cancelling $timeout and $interval
Differences between $timeout and JavaScript’s setTimeout()
Best practices

---

1. What is $timeout in AngularJS?

The $timeout service is similar to JavaScript’s setTimeout(). It executes a function after a specified delay.

Syntax

$timeout(function, delay, invokeApply);

• function: The function to execute after the delay.
• delay: Time in milliseconds before execution.
• invokeApply (optional, default: true): Whether to trigger Angular’s digest cycle.

---

2. Example of $timeout

Use Case: Displaying a message after 3 seconds

var app = angular.module("myApp", []);

app.controller("TimeoutController", function($scope, $timeout) {
    $scope.message = "Waiting...";

    $timeout(function() {
        $scope.message = "Hello, after 3 seconds!";
    }, 3000);
});

HTML

<div ng-app="myApp" ng-controller="TimeoutController">
    <p>{{ message }}</p>
</div>

How it works?

• Initially, message = "Waiting...".
• After 3 seconds, $timeout updates the message.
• The UI updates automatically because $timeout triggers Angular’s digest cycle.

---

3. Cancelling $timeout

To prevent execution, use $timeout.cancel().

Example: Cancelling $timeout if a button is clicked

app.controller("CancelTimeoutController", function($scope, $timeout) {
    var timer = $timeout(function() {
        $scope.message = "This message was delayed!";
    }, 5000);

    $scope.cancelTimeout = function() {
        $timeout.cancel(timer);
        $scope.message = "Timeout cancelled!";
    };
});

HTML

<div ng-app="myApp" ng-controller="CancelTimeoutController">
    <p>{{ message }}</p>
    <button ng-click="cancelTimeout()">Cancel Timeout</button>
</div>

Why cancel $timeout?

• Prevents unnecessary execution (e.g., when switching views).
• Improves performance.

---

4. What is $interval in AngularJS?

The $interval service is similar to JavaScript’s setInterval(). It repeats function execution at a specified time interval.

Syntax

$interval(function, interval, count, invokeApply);

• function: Function to execute.
• interval: Time in milliseconds between executions.
• count (optional): Number of times to run the function (default: infinite).
• invokeApply (optional, default: true): Whether to trigger the digest cycle.

---

5. Example of $interval

Use Case: Updating time every second

app.controller("IntervalController", function($scope, $interval) {
    $scope.currentTime = new Date().toLocaleTimeString();

    $interval(function() {
        $scope.currentTime = new Date().toLocaleTimeString();
    }, 1000);
});

HTML

<div ng-app="myApp" ng-controller="IntervalController">
    <p>Current Time: {{ currentTime }}</p>
</div>

How it works?

• $interval updates currentTime every second.
• The UI automatically updates due to Angular’s digest cycle.

---

6. Stopping $interval

To stop execution, use $interval.cancel().

Example: Stop updating time when a button is clicked

app.controller("StopIntervalController", function($scope, $interval) {
    $scope.currentTime = new Date().toLocaleTimeString();

    var timer = $interval(function() {
        $scope.currentTime = new Date().toLocaleTimeString();
    }, 1000);

    $scope.stopInterval = function() {
        $interval.cancel(timer);
    };
});

HTML

<div ng-app="myApp" ng-controller="StopIntervalController">
    <p>Current Time: {{ currentTime }}</p>
    <button ng-click="stopInterval()">Stop Updating</button>
</div>

Why cancel $interval?

• Prevents unnecessary executions.
• Saves memory and processing power.

---

7. $timeout vs JavaScript’s setTimeout()

Feature	$timeout	setTimeout()
Integrated with AngularJS?	Yes	No
Triggers $digest cycle?	Yes	No
Cancelling execution?	$timeout.cancel()	clearTimeout()
Suitable for UI updates?	Yes	No

Why prefer $timeout?

• Ensures automatic UI updates without calling $scope.$apply().
• Works seamlessly with Angular’s change detection.

---

8. $interval vs JavaScript’s setInterval()

Feature	$interval	setInterval()
Integrated with AngularJS?	Yes	No
Triggers $digest cycle?	Yes	No
Cancelling execution?	$interval.cancel()	clearInterval()
Suitable for UI updates?	Yes	No

Why prefer $interval?

• Automatically updates the UI.
• Easier to cancel and control execution.