Post
Ask Question

Set and Clear Timeout Using $timeout in AngularJS

Introduction

In your projects you might want to call a particular method again and again after a particular interval of time, it can be used in those cases where we need to refresh a particular control so that new data can be seen. It can be done using the $timeout directive of AngularJS. But there is a problem with $timeout that even if you change the page it will keep on working and it might frustrate the user as page might refresh or it can effect the performance of page. In that case you need to stop the timeout, so, here I'll tell both the things i.e. How to start and stop the $timeout in AngularJS.

Step 1

Here I am creating a simple example, you can make changes according to your requirement.

First of all I added a HTML page where I will show the timer working and will provide a link to stop the timer as well (you can use this link to stop and to change the page as well).

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <script src="http://code.angularjs.org/angular-1.0.0rc11.min.js"></script>  
  5.     <script src="AngularController.js"></script>  
  6.     <title></title>  
  7. </head>  
  8.   <body ng-app>  
  9.       <h3>  
  10.           Page to show how to set and clear timeout.  
  11.       </h3>  
  12.       <hr />  
  13.     <div ng-controller="AngularController">  
  14.         <h4>Let's Count: {{startCount}}</h4>  
  15.         <a ng-click="stopTimeout()" >Click to destroy Timer</a>  
  16.     </div>  
  17.   </body>  
  18. </html> 

Here I had bind the div with controller named as "AngularController".

In this div I had taken a <h4> tag which is bind to that model which will be updated using the $timeout directive.

After this I had provided the an anchor tag, on click of this anchor a function is called named as "stopTimeout()". This function will stop the timeout.

Step 2

Now I will work on the Angular Code. So, for that I had taken a JavaScript page on which this code is written:

  1. var AngularController = function ($scope, $timeout) {  
  2.   
  3.     $scope.startCount = 0;  
  4.     $scope.startTimeout = function () {  
  5.         $scope.startCount = $scope.startCount + 1;  
  6.         mytimeout = $timeout($scope.startTimeout, 1000);  
  7.     }  
  8.     $scope.startTimeout();  
  9.   
  10.     $scope.stopTimeout = function () {  
  11.         $timeout.cancel(mytimeout);  
  12.         alert("Timer Stopped");  
  13.     }  
  14. }; 

First of all I had created controller with same which was provided on the HTML page to bind the Div i.e. "AngularController". You can see that while creating this controller I had passed $timeout along with $scope, this is because if you don't pass this predefined directive then you will not be able to use it just like $scope is not available when it is not passed while creating the controller and start giving the error.

In this controller I had taken a model named as "startCount" and set it's value to 0.

After this I had created a function which will be called again and again. In this function I had incremented the startCount model by one.

After this I had passed the $timeout directive in a variable, passing it into a variable will help you to stop it.

In $timeout directive you need to pass two parameters, first one is the name of function which is to be called and other one is the interval of time in milliseconds after which this function is to be called.

After creating the function I had called it from outside, this will work as kickoff.

Another function is created which will be used to stop the $timeout. This is done by cancelling the variable in which timeout was called. An alert message will also be displayed to confirm that all things are working in right manner.

If you want your $timeout directive to stop on page change then this code can be used :

  1. $scope.$on("$destroy", function (event)  
  2. {  
  3.     alert("I am leaving");  
  4.     $timeout.cancel(mytimeout);  
  5. }); 

This code will work when controller is changing, $destroy will destroy all those models which are passed in it.

Output

Now our coding part is done and we can run the application to see the result.

On running the application you will see that count has started and is incrementing on each second.

$timeout in AngularJS

Now if we click on the anchor then our counter will stop and an alert message will be shown.

$timeout in AngularJS


Similar Articles