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?

Community · Accepted Answer · 2020-06-20 09:12:55Z

63

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 26, 2013 at 17:41

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ComFreek Over a year ago

setTimeout() definitely doesn't refer to jQuery (it's standard JavaScript).

Maxim Shoustin Over a year ago

yep, sorry, i forgot when last time used setTimeout. Thanks for fix

Sam Vloeberghs Over a year ago

$timeout also returns a promise: that example seems really useful!

ksimons · Accepted Answer · 2013-10-26 17:41:42Z

20

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.

answered Oct 26, 2013 at 17:41

ksimons

3,83620 silver badges17 bronze badges

Comments

georgeawg · Accepted Answer · 2018-08-02 22:26:53Z

1

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

answered Aug 2, 2018 at 22:26

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Example 1: $timeout

Example 2: setTimeout (same logic)

$timeout also returns a promise

$timeout also trigger digest cycle

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Example 1: $timeout

Example 2: setTimeout (same logic)

$timeout also returns a promise

$timeout also trigger digest cycle

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related