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

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?

Solution 1:

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

Solution 2:

1. 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
2. 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.

Solution 3:

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

• AngularJS $timeout Service API Reference
• AngularJS Developer Guide - Integration with the browser event loop