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

Learn how to stop testing everything every sprint and only test the code you’ve changed. Brought to you by Parasoft.

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 top tips for Java developers and best practices to overcome common challenges. Brought to you by Parasoft.


Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}