Angular Js Callback Function For $timeout

Question

Angular Js Callback Function For $timeout

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.

javascript
callback
angularjs

Answer 1

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

Answer 2

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.