How to run function with parameters using $timeout in AngularJS?

Question

I have this function inside my AngularJS controller. It looks like this;

polling_interval=1000;
var poll = function() 
{
  //Execution code
  $timeout(poll, polling_interval); 
}; 
poll();

It uses the $timeout service in AngularJS to keep calling itself. This works until I wanted to add parameters to this poll function. My code looks like this for the parameters added;

polling_interval=1000;
var poll = function(param1, param2) 
{
  //Execution code
  $timeout(poll(param1, param2), polling_interval); 
}; 
poll(param1, param2);

The syntax was not acceptable and I am at a loss now. How do I execute the function with parameters using $timeout in AngularJS? If this cannot be done, are there work-arounds to this problem? I would like to have my poll function accept parameters.

From 1.4.0 you can use $timeout([fn], [delay], [invokeApply], [Pass]); . Documentation here — vanduc1102
– vanduc1102, Commented Mar 1, 2016 at 7:24

alejandrociatti · Accepted Answer · 2015-06-17 18:47:43Z

48

$timeout is Angular's wrapper for window.setTimeout. Naturally, just like setTimeout it supports passing additional parameters to the timed-out fn.

From AngularJS API:

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

[fn] (function) being your function
[delay] (number) the delay in ms
[invokeApply] (boolean) defaults to true, on true, the fn is run inside $apply, if false, it skips model dirty checking.
[Pass] additional parameters! This is what you want!

How your code should look like:

polling_interval = 1000;
var poll = function(param1, param2){
    //Execution code
    $timeout(poll, polling_interval, true, param1, param2); 
}; 
poll(param1, param2);

This is the proper way to pass parameters to a timed-out fn. I hope you find this useful.

EDIT: This feature was added on January 22, 2015 (v1.4.1), prior to that version, the correct approach would have been:

polling_interval = 1000;
var poll = function(param1, param2){
    //Execution code
    $timeout(poll.bind(null, param1, param2), polling_interval); 
}; 
poll(param1, param2);

edited Jun 17, 2015 at 18:47

answered Jun 17, 2015 at 17:30

alejandrociatti

1,13211 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Masadow Over a year ago

Best solution ! I was wondering how to do it prior to 1.4.1 so +1 again. Other solutions using anonymous functions could give unexpected behaviours because of closures.

Will.Harris Over a year ago

Using the .bind() approach do you know why the first argument must be null? it had me stumped for a bit when I didn't do this and the parameters were getting messed up.

alejandrociatti Over a year ago

@Will the first argument for .bind() is the this, the "context", that the function will be bound to.That is in fact, the main usage of .bind(). When using the additional parameters, you not only bind the context, but bind as many params as you pass to .bind(), so when you call the resulting bound fn, you are calling it with the this you set with the first param, and the params you set with the remaining params. Chek Function.prototype.bind().Or maybe someone else can clarify more accurately

xiaoboa · Accepted Answer · 2014-04-05 03:08:42Z

31

Because the first parameter type of the $timeout is function, you need to do like this:

polling_interval=1000;
var poll = function(param1, param2) 
{
  //Execution code
  $timeout(function() {poll(param1, param2)}, polling_interval); 
}; 
poll(param1, param2);

answered Apr 5, 2014 at 3:08

xiaoboa

1,95114 silver badges18 bronze badges

2 Comments

JoachimR Over a year ago

this helped me. Note however that it also works in the following as long as you don't have any function parameters: 'myFunc = $timeout(someFunc(), someMilliseconds);' As soon as someFunc() has a parameter, it does not work anymore and one has to do what you have suggested: 'myFunc = $timeout(function () {someFunc(param)}, someMilliseconds);'

alejandrociatti Over a year ago

why did you choose an anonymous function over bind()?

mbonneau · Accepted Answer · 2014-04-05 03:04:50Z

8

Using an anonymous function would probably be the easiest way.

polling_interval=1000;
var poll = function(param1, param2) 
{
  //Execution code
  $timeout(function () { poll(param1, param2) }, polling_interval); 
}; 
poll(param1, param2);

answered Apr 5, 2014 at 3:04

mbonneau

6173 silver badges8 bronze badges

1 Comment

alejandrociatti Over a year ago

why did you choose an anonymous function over bind()?

Collectives™ on Stack Overflow

How to run function with parameters using $timeout in AngularJS?

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related