Skip to content
Related Articles

Related Articles

$timeout service in AngularJS
  • Last Updated : 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=
  </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.

Example 2:




<!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>

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
Recommended Articles
Page :