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:
The ng-controller is a directive to control the AngularJS Application.
The {{mycontent}} to bind the data in <h3> tag.
The “timeCtrl” used to create the controller for the Application with arguments $scope object and $timeout service.
The $timeout is used to specify set of instructions executed in specified time delay.
The “5000” specifies the time delay in milliseconds.
Sample Output for $timeout Service in AngularJS:
The “Welcome to Wikitechy” is displayed when page loads.
After 5000 milliseconds the content changed to “I am New Content After 5 seconds”.
Please enable JavaScript to view the comments powered by Disqus.
Related Searches to angularjs $timeout filter
angular timeout cancel
angularjs interval
$timeout is not defined
$timeout is not a function
angularjs timeout cancel example
angular timeout promise
angularjs wait
angularjs http timeout
$interval vs $timeout
directive $timeout is not defined
typeerror: $timeout is not a function
$timeout is not a function directive
module '$timeout' is not available
$timeout fn is not a function
$timeout vs settimeout
$timeout example
angularjs tutorials