Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS - How To Delay the $Digest() Cycle

DZone's Guide to

AngularJS - How To Delay the $Digest() Cycle

· Java Zone ·
Free Resource

Microservices. Streaming data. Event Sourcing and CQRS. Concurrency, routing, self-healing, persistence, clustering...learn how Akka enables Java developers to do all this out of the box! Brought to you in partnership with Lightbend.

Aaron Gray over at his blog recently posted a neat trick for reducing lag from the $digest() cycle when scaling AngularJS apps with large data sets. He recommends using a debounce function to put a delay on the $digest() cycle.

What’s a debounce function, you ask? Well, John Hann wrote a great explanation and implementation using pure JS way back in the late 2000’s. Years later, people ported this pattern to custom angular services. These were more “angularish”, but added a little clutter to your code. But now, Angular 1.3 has officially added support for debounce and delaying the digest cycle in a way that is super easy to use.

Gray finds it much simpler, now that native support has been added, to delay the $digest() function using only one line of HTML:

<input ng-model="user.name" ng-model-options="{ debounce: 150 }" />
He uses 150 milliseconds as an example here, but Gray suggests tinkering with the delay to find the most optimized time for a specific application. Check out his full explanation for more details.

Microservices. Streaming data. Event Sourcing and CQRS. Concurrency, routing, self-healing, persistence, clustering...learn how Akka enables Java developers to do all this out of the box! Brought to you in partnership with Lightbend. 

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}