What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?

Question

I had a suggestion to implement a timeout like this:

  $timeout(function() {

    // Loadind done here - Show message for 3 more seconds.
    $timeout(function() {
      $scope.showMessage = false;
    }, 3000);

  }, 2000);
};

Can someone tell me what is the reason / advantage in using this rather than using setTimeout?

score 63 · Accepted Answer · edited Jun 20 '20 at 09:12

In basic words $timeout refers to angularjs when setTimeout - to JavaScript.

If you still think to use setTimeout therefore you need invoke $scope.$apply() after

As a side note

I suggest you to read How do I “think in AngularJS” if I have a jQuery background? post

and AngularJS: use $timeout, not setTimeout

Example 1: $timeout

   $scope.timeInMs = 0;
  
    var countUp = function() {
        $scope.timeInMs+= 500;
        $timeout(countUp, 500);
    }    
    $timeout(countUp, 500);

Example 2: setTimeout (same logic)

 $scope.timeInMs_old = 0;
  
    var countUp_old = function() {
        $scope.timeInMs_old+= 500;        
        setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);
    }
        
    setTimeout(function () {
        $scope.$apply(countUp_old);
    }, 500);

Demo Fiddle

$timeout also returns a promise

JS

function promiseCtrl($scope, $timeout) { 
 $scope.result = $timeout(function({ 
 return "Ready!"; 
 }, 1000); 
}

HTML

<div ng-controller="promiseCtrl"> 
 {{result || "Preparing…"}}
</div>

$timeout also trigger digest cycle

Consider we have some 3d party code (not AngularJS) like Cloudinary plugin that uploads some file and returns us 'progress' percentage rate callback.

     // .....
     .on("cloudinaryprogress",
           function (e, data) {
               var name = data.files[0].name;
               var file_ = $scope.file || {};
               file_.progress = Math.round((data.loaded * 100.0) / data.total);
                               
                                
                $timeout(function(){
                     $scope.file = file_;
                }, 0);         
            })

We want to update our UI aka $scope.file = file_;

So empty $timeout does the job for us, it will trigger digest cycle and $scope.file updated by 3d party will be re-rendered in GUI

`setTimeout()` definitely doesn't refer to jQuery (it's standard JavaScript). — ComFreek, Oct 26 '13 at 17:48
yep, sorry, i forgot when last time used `setTimeout`. Thanks for fix — Maxim Shoustin, Oct 26 '13 at 17:49
$timeout also returns a promise: that example seems really useful! — Sam Vloeberghs, Dec 11 '14 at 12:53

score 20 · Answer 2 · answered Oct 26 '13 at 17:41

It wraps your callback for you automatically in a try/catch block and let's you handle errors in the $exceptionHandler service: http://docs.angularjs.org/api/ng.$exceptionHandler
It returns a promise and thus tends to interoperate better with other promise-based code than the traditional callback approach. When your callback returns, the value returned is used to resolved the promise.

score 1 · Answer 3 · answered Aug 02 '18 at 22:26

AngularJS modifies the normal JavaScript flow by providing its own event processing loop. This splits the JavaScript into classical and AngularJS execution context. Only operations which are applied in the AngularJS execution context will benefit from AngularJS data-binding, exception handling, property watching, etc.

By using the AngularJS $timeout service, the wrapped setTimeout will be executed in the AngularJS execution context.

For more information, see

What advantage is there in using the $timeout in AngularJS instead of window.setTimeout?

3 Answers3

Example 1: $timeout

Example 2: setTimeout (same logic)

$timeout also returns a promise

$timeout also trigger digest cycle

Linked

Related