CODEWITHSUNDEEP
javascriptangularjsperformance
Charlie Dalsass
Charlie Dalsass

Reputation: 2014

Angular performance with function expression

What are the performance implications of running a function within an Angular expression? For example:

<button ng-if="isValid()">Valid</button>

I'm assuming the function isValid() is being run for each digest loop, which occur many times per second. What options are available within Angular for improving the performance here?

One idea would be to run isValid() within a timeout function a few times a second, then setting a scope variable, so I can control the speed of the "digest". Are there other options people use?

Upvotes: 0

Views: 390

Answers (3)

inorganik
inorganik

Reputation: 25525

It looks like you're checking if a form is valid before submitting. First of all, your ng-if on the button defeats the purpose of using the same function to conditionally apply a class, since it won't even be in the DOM if isValid() returns false.

You should be able to use ng-pattern, ng-change hooks on your inputs to determine validity as the user is entering form values. Then on your button you can apply the class based on the form's validity:

<button ng-class="{
       'btn-success': myFormName.$valid,
        'btn-danger':  !myFormName.$valid
    }" ng-bind="(myFormName.$valid) ? 'Valid' : 'Invalid'"></button>

If you want to suppress form submission, you can check validity of the form inside a function with ng-submit on the <form> tag:

<form name="myFormName" ng-submit="myFormName.$valid && mySubmitFunction()">

Upvotes: 1

Charlie Dalsass
Charlie Dalsass

Reputation: 2014

One way is to run the isValid function within an interval function, setting a simple scope variable within. For example:

$interval(function() {
  scope.isvalid = scope.isValid();
}, 100);

This will run every 100ms, but is probably preferable to the number of calls the digest makes. You can also use $watch or $observe to reduce the number of calls.

Upvotes: 0

asotog
asotog

Reputation: 225

I think if function body is just a simple logic comparison, won't affect performance, but if it gets complex, you can try profiling your code via chrome tools to see how much is performing,

Another alternative is also you can try binding the ng-if to a controller scope property instead and modify the value from other part of your controller's code, so maybe you can apply kind of debounce (https://github.com/shahata/angular-debounce) technique to avoid set the scope variable tons of times

Upvotes: 1

Related Questions