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, Feb 18 '13 at 20:14
Can you post plunker example that shows that is not been called after timeout? — Valentyn Shybanov, Feb 18 '13 at 20:51

score 14 · Accepted Answer · answered Feb 19 '13 at 06:56

$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!

score 1 · Answer 2 · answered Feb 18 '13 at 21:12

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 '13 at 21:12

Mark Rajcok

348,511
112
482
482

I think you got the idea about what I ask. Is there any other way to achieve it? – kamaci Feb 18 '13 at 21:40
I don't think so: http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep – Mark Rajcok Feb 18 '13 at 21:44
should I use setTimeout or $timeout does the same? – kamaci Feb 18 '13 at 21:47
1

@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() });`. – Josh David Miller Feb 19 '13 at 00:02
@JoshDavidMiller you should write that as an answer, it works. – kamaci Feb 19 '13 at 06:41

Angular Js Callback Function For $timeout

2 Answers2