2

Simple Example of Angularjs $interval and $timeout

 1 year ago
source link: https://www.js-tutorials.com/angularjs-tutorial/simple-example-angularjs-interval-timeout/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Simple Example of Angularjs $interval and $timeout

This is a simple angular application to understand $interval and $timeout with angular 1.4. The $interval and $timeout is angular wrapper of setTimeout and setInterval JavaScript function.

This angularjs tutorial help to create a simple example of timer services timeout and interval, Both timer services belong to window object.

What is $timeout service in Angularjs

$timeout is wrapper of window.setTimeout function and call for only single time, This method return the promise and will be resolved when the delay has passed,You can cancel and stop timeout using $timeout.cancel(promise) method.

You can also destroyed all deferred functions using the $timeout.flush() method.

The syntax:
$timeout([fn], [delay], [invokeApply], [Pass]);

Where is:
fn : Method name, whose execution should be delayed.
delay : Delay in millisecond to execute function.
invokeApply : If true then invoke fn within the $apply block.
Pass : Additional parameters to the executed function.

Checkout Other Angular tutorials,

Simple Example Of $timeout

We will create simple angularjs example to understand $timeout service using a method. We will create a method that will show ‘Hello’ message into console and execute after 2 sec.

function pipeProcessCtrl($scope, $timeout) {
	function helloLog(){
		console.log('Hello');
	}
	$timeout(helloLog(), 2000);
}

Above example, I have injected interval service into controller and schedules a function call to helloLog() after 2 seconds (2000 milliseconds).

What is $interval service in Angularjs

$interval is wrapper of window.setInterval function and use for repeatedly calling a method with a time interval in between. This method returns the promise and will be resolved after a number of passed iteration, if the count is not defined then run independently. You can cancel and stop interval iteration using $interval.cancel(promise) method.

You can also destroyed all deferred functions using the $interval.flush(millisecond) method. You need to explicitly destroy interval objects when you are finished with them.

The syntax:

$interval(fn, delay, [count], [invokeApply], [Pass]);

Where is:
fn : Method name, whose will call repeatedly at the given interval.
delay : delay in millisecond between each function call.
count : Iteration of method.
invokeApply : If true then invoke fn within the $apply block.
Pass : Additional parameters to the executed function.

Simple Example of $interval Service

We will create simple angularjs example to understand $interval service using a method. We will create a method that will console log ‘Hello’ message and execute repeatedly after 2 seconds.

function pipeProcessCtrl($scope, $interval) {
	function helloLog(){
		console.log('Hello');
	}
	$interval(helloLog(), 2000);
}

The Above example, I have injected interval service into the controller and schedule a function call to helloLog() after 2 seconds (2000 milliseconds) for the unlimited count.
You can also assign promise to the variable and destroy them very effective way using separate methods.

function pipeProcessCtrl($scope, $interval) {
	$scope.helloLog = function(){
		console.log('Hello');
	}
	$scope.pool_interval = null;
	
	function startLogPooling(){
         $scope.pool_interval = $interval(function(){
            if($scope.do_pooling) {
               $scope.helloLog(name);
            }                         
            },2000);
      }
 
    function stopLogPooling(){
 
      $scope.do_pooling = false;
     
      if ($scope.pool_interval != null) {
         $interval.cancel($scope.pool_interval);
         $scope.pool_interval = null;
      }
    }
           
    startLogPooling()
	$interval(helloLog(), 2000);
}

Where Do We Use $timeout and $interval?

The $timeout help to wait for the function execution at the specified time, sometimes you need to call a method after some time, that scenario you will use $timeout method and passed your delayed time in second.

The $interval help to call a method again and again on a given time interval, Like we want to call a method on each 5 seconds interval that time we will use $interval and passed interval time 5000 millisecond.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK