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

Download Microservices for Java Developers: A hands-on introduction to frameworks and containers. Brought to you in partnership with Red Hat.

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.

Download Building Reactive Microservices in Java: Asynchronous and Event-Based Application Design. Brought to you in partnership with Red Hat

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}