AngularJS $timeout



  • The $timeout is an AngularJS service used to call a function on a specified time delay.
  • The $timeout similar to JavaScript’s window.setTimeout the only difference is we have to use $scope.apply() while using window.setTimeout().

Syntax for $timeout Service in AngularJS:

$timeout([function], [delaytime], [invokeApply], [parameter]);

Parameter Values of $timeout Service in AngularJS:

Parameter Description
function The functional part to be executed using $timeout Service.
delaytime Delay time in milliseconds.
invokeApply Boolean value to specifies to invoke $apply or not.
parameter Additional parameters to $timeout service.

Methods of $timeout Service in AngularJS:

  • $timeout.cancel(); is used to cancel the timeout request.

Sample code for $timeout Service in AngularJS:

 Tryit<!DOCTYPE html>
<html>
    <head>
        <title>Wikitechy AngularJS Tutorials</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/
        angular.min.js"> </script>
    </head>
    <body>
        <div ng-app="myApp" ng-controller="timeCtrl">
            <h3>See the content after 5 seconds. </h3>
            <h3>{{mycontent}} </h3>
        </div>
        <script>
            var app = angular.module( 'myApp', [] );
            app.controller("timeCtrl", function($scope, $location) {
                $scope.mycontent = "Welcome to Wikitechy!";
                $timeout(function () {
                    $scope.mycontent = "I am New Content After 5 seconds";
                },5000);
            });
        </script>
    </body>
</html>

Data:

  • Set of data has been used in $timeout service for our AngularJS Application.
mycontent = "Welcome to Wikitechy!";

HTML:

  • Viewable HTML contents in AngularJS Application.
<div ng-app="myApp" ng-controller="timeCtrl">
    <h3>See the content after 5 seconds. </h3>
    <h3>{{mycontent}}</h3>
</div>

Logic:

  • Controller logic for the AngularJS application.
app.controller("timeCtrl", function($scope, $timeout) {
    $scope.mycontent = "Welcome to Wikitechy!";
    $timeout(function () {
        $scope.mycontent = "I am New Content After 5 seconds";
    },5000);
});

Code Explanation for $timeout Service in AngularJS:

Code Explanation for AngularJS $timeout

  1. The ng-controller is a directive to control the AngularJS Application.
  2. The {{mycontent}} to bind the data in <h3> tag.
  3. The “timeCtrl” used to create the controller for the Application with arguments $scope object and $timeout service.
  4. The $timeout is used to specify set of instructions executed in specified time delay.
  5. The “5000” specifies the time delay in milliseconds.

Sample Output for $timeout Service in AngularJS:

Sample Output1 for AngularJS $timeout

  1. The “Welcome to Wikitechy” is displayed when page loads.
  2. Sample Output2 for AngularJS $timeout

  3. After 5000 milliseconds the content changed to “I am New Content After 5 seconds”.


Related Searches to angularjs $timeout filter