$timeout service in AngularJS

11 Oct, 2019
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.
This article will deal with the ‘$timeout’ service of AngularJS.This ‘$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 Example: 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);  });
In the example code given above, it is evident that the warning message gets displayed 2000 milliseconds after the user logs in.Example 1:
<!DOCTYPE html>  <html>  <head>    <title>GeeksforGeeks</title>    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </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>      <div ng-app="myApp" ng-controller="myCtrl">          <p>AngularJS - $timeout</p>          <b>{{text}}</b>      </div>  </body>  </html>
Explanation: This example demonstrates a working stopwatch. The stopwatch starts from 0 milliseconds and runs until the timer reaches 15000 milliseconds. After the 15000 milliseconds, the mark is reached, a new message ‘Time Up’ gets displayed on the screen.
Output
The default welcome message
Message after 4 seconds of delay
Explanation: In the first example, 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.
<!DOCTYPE html>  <html>  <head>    <title>GeeksforGeeks</title>      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">  </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>      <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: This example demonstrates a working stopwatch. The stopwatch starts from 0 milliseconds and runs until the timer reaches 15000 milliseconds. After the 15000 milliseconds, the mark is reached, a new message ‘Time Up’ gets displayed on the screen.
Output
Screenshot before the stopwatch starts
Screenshot after the time has elapsed
For this, 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.
AngularJS-Misc
AngularJS
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Auth Guards in Angular 9/10/11
Routing in Angular 9/10
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?