Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How often does the AngularJS digest loop run?

When discussing the merits of AngularJS, two-way data binding is often touted as a major benefit of Angular over other JS frameworks. Digging deeper, the documentation suggests this process is done through dirty-checking rather than through event-driven measures. At first, it seems that the digest-loop works by having a method fire off in the background at periodic intervals, checking all the $watches during each cycle. However, reading further, it seems that the digest-loop is actually triggered by rootScope.digest(), which in turn is triggered by $.apply, which is in turn triggered by an event(!), such as an onClick event called through ng-click.

But, how can this be? I thought Angular doesn't use change listeners. So how does the digest-loop really operate? Does Angular automatically kick-off the digest-loop internally, or is the digest-loop triggered by events? If the digest-loop is run automatically, how often does it run?


Some clarification points:

  • I'm not asking about how the digest-loop runs when manually binding to changes. In this case, if you want to force a digest loop, you can do so by calling $.apply()
  • I'm also not asking about how often digest loop runs in response to user events. For example, if ng-model is on an input box, Angular will kick-off a digest loop when a user starts typing. The confusing part is that in order to know a user was typing, doesn't Angular use an event-based onKeyUp somewhere?
  • I already know that there is a limit of 10 cycles max per digest-loop. My question is less about the number of cycles per digest-loop, but rather the number of digest-loops that run, say, per second.
  • Bonus questions: How does the digest-loop relate to the JavaScript event-loop? Does the JS event loop run periodically in the background? Is the digest-loop the same thing as the event loop, but only in the "Angular Context"? Are these totally different ideas?
like image 992
derekchen14 Avatar asked Aug 07 '14 08:08

derekchen14


People also ask

What is Digest loop in AngularJS?

The digest loop is responsible to update DOM elements with the changes made to the model as well as executing any registered watcher functions. The $digest loop is fired when the browser receives an event that can be managed by the angular context. This loop is made up of two smaller loops.

What is digest cycle in Angular 2?

It again performs the second cycle of dirty checking on the previous cycle, watches listeners. Because there may have been variables that have got changed by others. Minimum 2 iterations are performed and the maximum 10 can run. Although it is preferred to minimize the digest cycle for better performance.

What is dirty checking in AngularJS?

Dirty checking is a simple process that boils down to a very basic concept: It checks whether a value has changed that hasn't yet been synchronized across the app. Our Angular app keeps track of the values of the current watches.


1 Answers

Angular digests are triggered - they don't happen through polling.

Code executes, after code is done, angular triggers a digest.

Example:

 element.on('click', function() {      $scope.$apply(function() {           // do some code here, after this, $digest cycle will be triggered      });  }); 

Angular will also trigger a $digest after the compile/link phase:

Compile > Link > Digest 

And as to how many digest cycles are triggered? It depends on how soon the scope variables stabalise. Usually it takes at least 2 cycles to determine that.

like image 173
pixelbits Avatar answered Sep 17 '22 20:09

pixelbits