Angular Js Callback Function For $timeout

Question

I have that line of codes

...
$timeout(tempFunc, $scope.sync.getDelay());
...

at my temp function I have that line of code at end:

$scope.sync.releasePrivilege();

and everything works well. However when I try:

...
$timeout(tempFunc, $scope.sync.getDelay());
$scope.sync.releasePrivilege();
...

It doesn't. I think that I should write that line as a callback function into timeout. I don't want to change recent functions at my code I can just edit that lines.

Any ideas?

PS: The problem is that:

$scope.sync.releasePrivilege();

is not running after timeout, it immediately runs.

What exact "doesn't work"? Can you post not working code to plnkr.co or jsfiddle to see what is wrong — Valentyn Shybanov
– Valentyn Shybanov, Commented Feb 18, 2013 at 20:14
Can you post plunker example that shows that is not been called after timeout? — Valentyn Shybanov
– Valentyn Shybanov, Commented Feb 18, 2013 at 20:51

Josh David Miller · Accepted Answer · 2013-02-19 06:56:27Z

$timeout is a wrapper for setTimeout that gets mocked out during testing. @MarkRajcok is completely right about about why using it as a blocking method doesn't work. Mark's solution would also solve your issue. But if it's not feasible to relocate your code, there is still good news!

$timeout returns a promise (see $q), so you can actually just chain together what you want:

$timeout( tempFunc, $scope.sync.getDelay() ).then( function() {
  console.log("I'm called only after the timeout.");
  $scope.sync.releasePrivilege();
});

console.log("But I get called immediately.");

And this should work just fine, should you fancy. It still doesn't block. It just ensures that the function within the then call is executed only after the promise is resolved, that is only when the timeout has completed and your method has been called.

Additionally, your function can return data, if needed. So if tempFunc returned a Boolean value that indicated success, you could also access it:

$timeout( tempFunc, $scope.sync.getDelay() ).then( function( result ) {
  if ( result ) {
    $scope.sync.releasePrivilege();
  } else {
    // handle the error
  }
});

And there was much rejoicing. Yay.

Just as a note: doing a sleep in a browser would be very bad - it'd lock the UI. Asynchronous execution is what makes the web an awesome platform!

Mark Rajcok · Accepted Answer · 2013-02-18 21:12:16Z

1

Timeout does not provide the equivalent of a "sleep". $timeout puts work (in your case, tempFunc) on the native event queue, and hence tempFunc will be called later (after the browser renders). $scope.sync.releasePrivilege(); will therefore be executed before tempFunc. As you stated, if you want releasePrivilege() to execute after tempFunc(), have tempFunc() call it.

answered Feb 18, 2013 at 21:12

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

5 Comments

kamaci Over a year ago

I think you got the idea about what I ask. Is there any other way to achieve it?

Mark Rajcok Over a year ago

I don't think so: stackoverflow.com/questions/951021/…

kamaci Over a year ago

should I use setTimeout or $timeout does the same?

Josh David Miller Over a year ago

@kamaci $timeout is a wrapper for setTimeout that gets mocked out during testing, so definitely use it instead. Doing a sleep in a browser would be very bad - it'd lock the UI. Asynchronous execution is what makes the web an awesome platform. But $timeout returns a promise, so just chain it: $timeout(...).then(function(){ $scope.sync.releasePrivilege() });.

kamaci Over a year ago

@JoshDavidMiller you should write that as an answer, it works.

Collectives™ on Stack Overflow

Angular Js Callback Function For $timeout

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related