Open In App

AngularJS $timeout Service

Improve
Improve
Like Article
Like
Save
Share
Report

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:

 



Last Updated : 05 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads