AngularJS $timeout Service

The AngularJS $timeout service is similar to JavaScript's window.setTimeout function. In angular it is refer to it through the $timeout service. The $timeout is just wrapper for window.setTimeout function so that it will be easy to override, remove or mocked for testing. The AngularJS $timeout service return promise which can be used to cancel the $timeout task.

The $timeout service is executed provided function on every delay milliseconds.

Syntax

var promise = $timeout(functionName, 1000);
$timeout(functionName, 1000);

AngularJS $timeout Service Example

<!DOCTYPE html>  
<html>  
<head> <!-- www.techstrikers.com -->  
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>   
    <meta charset="utf-8">  
    <title>AngularJS $timeout Example</title>  
  <script>  
var app = angular.module('app', []);  
    app.controller("TimeoutController", function ($scope, $timeout) {  
      $scope.counter = 0;
      $scope.promise = '';
      $scope.Counter = function () {  
        $scope.counter = $scope.counter + 1;  
      }  
       $scope.StartCounter = function () {
         $scope.promise = $timeout($scope.Counter, 1000);
       }
       $scope.CancelCounter = function () {
         $timeout.cancel($scope.promise);
         $scope.counter = 0;
       }
    });  
</script>  
</head>  
<body style="background-color:#DDE4E9;">  
  <fieldset style="background-color:#DDE4E9;">              
    <legend>AngulerJS $timeout Service Example</legend>   
  <div ng-app="app">        
    <div ng-controller="TimeoutController">        
        <button ng-click="StartCounter()">Start Counter</button>
      <button ng-click="CancelCounter()">Cancel Counter</button>
     <p style="font-family:Arial;color:yellow;background:steelblue;padding:3px;width:350px;"  
     >Counter : - {{counter}}</p>   
        
    </div>        
</div>  
 </fieldset>   
</body>  
</html>

See Live Example

« Previous