$timeout service in AngularJS

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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);
  
});

chevron_right


In the example code given above, it is evident that the warning message gets displayed 2000 milliseconds after the user logs in.
Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
  
<head>
    <title>GeeksforGeeks</title>
    <script src=
  </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>

chevron_right


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.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
  
<html>
  
<head>
    <title>GeeksforGeeks</title>
  
    <script src=
  </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>

chevron_right


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.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.