Angular performance with function expression

Question

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?

Using function when binding is not a good idea at all, but sometimes it can be necessary. Anyways, How isValid() looks like? Can you show? — lenilsondc
– lenilsondc, Commented Oct 21, 2016 at 14:42
isValid is a function which returns true or false, and does quite a bit of work - looping through an internal structure and calling many functions. — Charlie Dalsass
– Charlie Dalsass, Commented Oct 21, 2016 at 14:44
Not relevant to the question. It could be a link or any DOM element for that matter. — Charlie Dalsass
– Charlie Dalsass, Commented Oct 21, 2016 at 14:47
Hmm, I think it could be, you can move the isValid() inside the button click and prevent the natural action in case it return false. — lenilsondc
– lenilsondc, Commented Oct 21, 2016 at 14:50

asotog · Accepted Answer · 2016-10-21 14:50:29Z

1

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

answered Oct 21, 2016 at 14:50

asotog

2251 gold badge2 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Charlie Dalsass Over a year ago

I have said in comments this is a complex function. Debounce is an interesting idea, I will read up on that now.

Mr Lister · Accepted Answer · 2016-11-01 20:05:38Z

1

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()">

edited Nov 1, 2016 at 20:05

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Oct 21, 2016 at 15:16

inorganik

25.7k18 gold badges96 silver badges126 bronze badges

6 Comments

Charlie Dalsass Over a year ago

That's not really the point of my question. I'm asking about performance of the function and what options are available. You're getting all hung up on everything superfluous to the actual question.

inorganik Over a year ago

I'm just trying to point out that you should be checking the validity on an input by input basis, not on every digest.

Charlie Dalsass Over a year ago

Ok, +1 inorganik, but I don't really want to assume anything about what's changing the results of isValid() (e.g. changes come from a variety of sources, like timer functions firing, watchers, etc not just form input -- which would be more straightforward case)

inorganik Over a year ago

Curious how something that has nothing to do with user input can be invalid? If it's invalid, that means the user interacted with it. You should be checking against the specific interactions, not just running an isValid() check periodically.

Charlie Dalsass Over a year ago

For example, you can run a long running script that periodically checks the network for anything that makes isValid() change.

|

Charlie Dalsass · Accepted Answer · 2016-10-21 15:43:28Z

0

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.

answered Oct 21, 2016 at 15:43

Charlie Dalsass

2,01419 silver badges25 bronze badges

Collectives™ on Stack Overflow

Angular performance with function expression

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related