Over a million developers have joined DZone.

AngularJS - How To Delay the $Digest() Cycle

DZone's Guide to

AngularJS - How To Delay the $Digest() Cycle

· Java Zone ·
Free Resource

Atomist automates your software deliver experience. It's how modern teams deliver modern software.

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.

Get the open source Atomist Software Delivery Machine and start automating your delivery right there on your own laptop, today!


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}