Debounce in AngularJs with Examples

What is Debounce

In generally debounce is nothing but to wait for sometime and do this action. With debounce, you can add a delay for updating the ngModel value. 

Eg: if a user wants to update the model value after 2 sec (or) update the model value after some action then by just adding this debounce will do the job.

ng-model and ng-model-options

To use this debounce we need to know about ng-model and ng-model-options, so let us just briefly know about it. Data binding is one of the best feature of Angular Js. ng-model is the best option is to bind the data to the view. ng-model directive provides a two-way data-binding mechanism that makes the connection between your View-Model and various User Interface (UI) controls. So, ng-model knows how to bind your View-Model to something like an input[type=text]; and, conversely, it knows how to update the Input value when your View-Model changes.

To have a good control on how the angular updates and manipulates the data AngularJs introduces ng-model-options. This includes things like updating the model only after certain events are triggered or a debouncing delay, so that the view value is reflected back to the model only after a timer expires.

   Eg: <input type="text" ng-model="name">       <p>Hello {{name}}!</p>

Now, when typing something into the input element, the model gets updated accordingly and then reflected back to the view, which displays the value in our p elementThe reason why the view is updated immediately, is that every time theinput element fires an input event, Angulars $digest loop is executed until the model stabilizes. And that’s nice because we don’t have set up any event listeners and update the DOM manually to reflect model values in the view; Angular takes care of that.

Because of the $digest that happens to be triggered on every single keystroke, Angular has to process all registered watchers on the scope whenever you type something into the input element. Depending on how many watchers are registered and of course how efficient the watcher callbacks are, this can be very expensive. So wouldn’t it be great if we could somehow manage to trigger a $digest only after the user stopped typing for, let’s say, 300 milliseconds? Or only when the user removes the focus of the input element?
Yes, and we can do so thanks to Angular 1.3 and the ngModelOptionsdirective.

Update ng-model with updateOn

With the updateOn parameter, we can define which events our input should be bound to. For example, if we want our model to be updated only after the user removed the focus of our input element, we can simply do so by applying the ngModelOptions with the following configuration

Eg: <input type="text" ng-model="name" ng-model-options="{ updateOn:       'blur' }">     <p>Hello {{name}}!</p>

Update ng-model with debounce

We can delay the model update with ngModelOptions in order to reduce the amount of $digest cycles that are going to be triggered when a user interacts with our model. debounce defines an integer value which represents a model update delay in milliseconds. we want to update our model 300 milliseconds after the user stopped typing, we can do so by defining a debounce value of 300 like this:

Eg : <input type="text" ng-model="name" ng-model-options="{                debounce: 300 }">      <p>Hello {{name}}!</p>

We can Combine both the updateOn and debounce too.