AngularJS $timeout Service
Last Updated :
05 Sep, 2022
Web development is a rapidly growing field. A technology introduced today is bound to get outdated within a few months. Earlier, the websites used to be static, with little to no animation or CSS. However, the introduction of vanilla JavaScript completely revolutionized the way websites used to look and function. But as stated earlier, soon the users got fed up and started looking for something fresh and out of the box. This was when AngularJS entered the market and completely changed the way websites used to function.
Single Page Applications(SPAs) are created using AngularJS. There are around 30 built-in services in AngularJS. Other than these, the users can also create their own user-defined services, as per the project requirements. In this article, we will see the ‘$timeout’ service of AngularJS.
The ‘$timeout’ service of AngularJS is functionally similar to the ‘window.setTimeout’ object of vanilla JavaScript. This service allows the developer to set some time delay before the execution of the function.
For instance, Suppose the developer wants to display a warning message on the user’s screen, 2 seconds after the user logs in. He can use the $timeout function of AngularJS to create such functionality.
var app = angular.module('timeoutApp', []);
app.controller('timeoutCtrl', function ($scope, $timeout) {
$scope.text="Enter username and password to login"
$timeout(function () {
$scope.text = "Do not share your username and password with anybody";
}, 2000);
});
Example 1: In this example, it is evident that the warning message gets displayed 2000 milliseconds after the user logs in.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script src=
charset="utf-8">
</script>
<script src=
charset="utf-8">
</script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout) {
$scope.text = 'Welcome to the website.';
$timeout(function() {
$scope.text =
'Message changes after 4000 milliseconds of delay.';
}, 4000);
});
</script>
</head>
<body style="text-align: center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $timeout service</h3>
<div ng-app="myApp" ng-controller="myCtrl">
<p>AngularJS - $timeout</p>
<b>{{text}}</b>
</div>
</body>
</html>
|
Explanation: Here, the $timeout service has been used to create a delay of 4 seconds. This is why the welcome message changes 4 seconds after the page loads.
Output:
Example 2: This example demonstrates a working stopwatch. The stopwatch starts from 0 milliseconds and runs until the timer reaches 15000 milliseconds. After the 15000 milliseconds, mark is reached, and a new message ‘Time Up’ gets displayed on the screen.
HTML
<!DOCTYPE html>
<html>
<head>
<title>GeeksforGeeks</title>
<script src=
charset="utf-8">
</script>
<script src=
charset="utf-8">
</script>
<script type="text/javascript">
(function() {
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $timeout) {
//code for the delay
$timeout(function() {
$scope.txt = "Time Up!";
}, 15000);
//storing time in scope variable
$scope.time = 0;
//callback calculations
var timer = function() {
if($scope.time < 15000) {
$scope.time += 500;
$timeout(timer, 500);
}
}
//execute
$timeout(timer, 500);
});
})();
</script>
</head>
<body style="text-align:center">
<h1 style="color: green">GeeksforGeeks</h1>
<h3>AngularJS $timeout service</h3>
<div ng-app="myApp">
<div ng-controller="myController">
<h2>Stopwatch - 15000 milliseconds</h2>
<div>Time Elapsed : {{time}} milliseconds</div>
<h3>{{txt}}</h3> </div>
</div>
</body>
</html>
|
Explanation: Here, a timer function is created. The function starts from 0, and increments by 500 for every 0.5 seconds of time elapse. The timer keeps running until it reaches the 15000 milliseconds mark. A new message ‘Time Up’ gets displayed on the screen.
Output:
Similar Reads
AngularJS $window Service
The $window service refers to the browser window object. It is globally available in JavaScript, so it causes testability problems. In AngularJS, it is not globally available. It includes various methods like alert box, prompt box, confirms box, etc. Now let us see the actual implementation of the $
2 min read
AngularJS Services
The Services is a function or an object that avails or limit to the application in AngularJS, ie., it is used to create variables/data that can be shared and can be used outside the component in which it is defined. Service facilitates built-in service or can make our own service. The Service can on
4 min read
AngularJS $templateRequest Service
The AngularJS $templateRequest service is used to fetch the contents of an HTML template. It makes an HTTP GET request to the specified template URL and returns the template content as a string. The $templateRequest service is part of the ngRoute module, which must be included in your application in
3 min read
Angular.js $log Service
The $log service in Angular.js is simply used for logging purposes on the browser console. It is used for the debugging and troubleshooting of the error in the code. It has various implementations like a log, warn, info, error, and debugging, and all the names suggest. It is used for logging, warnin
5 min read
AngularJS $parse Service
The $parse service in AngularJS is a function that takes an expression string and returns a function that can be used to parse and evaluate the expression. The expression string can contain variables, operators, and function calls. To use the $parse service, you first need to inject it into your Ang
3 min read
AngularJS $interval Service
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
4 min read
AngularJS $document Service
In AngularJS, a service is a function or object that is available for dependency injection (DI) in an AngularJS app. Services are typically used to encapsulate and reuse business logic and other app functionality that is not directly related to the presentation of data in the app. The $document serv
3 min read
AngularJS $location Service
The $location in AngularJS basically uses a window.location service. The $location is used to read or change the URL in the browser and it is used to reflect that URL on our page. Any change made in the URL is stored in the $location service in AngularJS. There are various methods in the $location s
4 min read
AngularJS limitTo Filter
The limitTo filter in AngularJS is used to return an array or a string that contains a specified number of elements. This filter can be used with arrays, strings, and numbers. The basic principle, however, remains the same in all three cases: For arrays, it returns an array containing only the speci
2 min read
AngularJS | Application
Applications in AngularJS enable the creation of real-time Applications. There are four primary steps involved in creation of Applications in AngularJS: Creation of List for an Application. Adding elements in the List. Removing elements from the List. Error Handling Below are the steps for creations
3 min read