computed refresh too often

amoss

Hi

I have 2 properties: value1 and value2. I have a computed value:

divideValues { return value1 / value2}

in html:

result -> {{ divideValues }}

On a certain event, value1 is changed, then an axios call is made (with value1 as a parameter) and the response changes value2. Meaning, value1 changes value and only after that value2 changes. This is causing the computed to be calculated twice and rapidly. This is causing a flickering in the GUI and if the call is a bit slow, the user sees incorrect values for a short period of time.

My question: how can I make the refresh only after the 2 values are updated?
I thought of using a “middle man” property and change both value1 and value2 in the call’s response but that would also cause a double computing, once per valueX change.

How can I avoid this?
Thanks

s.molinari

Put it in a method? Or, put the calculation in a watcher for only value 2 and make dividedValues a part of data?

Scott

amoss

It was a method and the same problem happened, I thought a computed will work but it didn’t.
Where can I read about the watcher for only value2?

amoss

ok, found this: https://flaviocopes.com/vue-watchers/
now the question is whether this is the good practice for this kind of scenario, thanks

s.molinari

The only difference between watchers and computeds is computeds are cached. And since this is waiting for an update from a server anyway and it isn’t a huge calculation, a watcher should be fine.

Scott

amoss

The watcher works great but… Is there a way to watch 2 properties?
I have 3 functions (Y changes immediately so no need to watch it)
1 use X and Y
2 use X
3 use X and Z

1 and 2 can happen by watching X
but 3 should happen by watching X and Z because sometimes X returned first and sometimes Z.
How can this be done?
Thanks

s.molinari

Reacting to two props would need a computed property.

Scott

amoss

but it will bring me back to square 1 where a change on each property will trigger the computed calculation.
Maybe I will move this part to the server as well.

turigeza

@amoss Watch as many properties as you need to. Calculate your display number which isn’t watched or computed with a function.
https://codepen.io/turigeza/pen/MWwOYZE?editors=1010

amoss

I’m watching the 2 props

watch: {
    prop1: function() {
        this.getCalc();
    },
    prop2: function() {
        this.getCalc();
    }
},

    getCalc() {
        this.calc = prop1 / prop2 * 100;
    },

This works but it works twice, once when prop1 is being updated and once when prop2 is being updated so there’s a short flickering on the screen with a wrong number.

I need both props to be updated and only then, call getCalc.
Thanks

turigeza

@amoss There is no built in method to achieve that you have to track changes to those variables yourself.

If you only truly want to recalculate when both changed then you should have fields like prop1Tainted, prop2Tainted and mark those tainted with your watchers. Only recalculate if they are both tainted / changed.

But if you are just worried about the flickering you should debounce your recalculate function.

amoss

English please
What do you mean by “you should debounce your recalculate function”?

turigeza

@amoss It is english : ))

Look at Lodash docs …
https://lodash.com/docs/4.17.15#debounce
Or
https://davidwalsh.name/javascript-debounce-function

Basically you don’t react to changes immediately but wait x milliseconds to see if any other action happened which effects the outcome.

Typically you use it when users type in a textfield you don’t go and react to every single keystroke but wait for a 250 millisecond silence/nonactivity only then would you go and save the field to the server or do what ever you need to.

amoss

Thanks, will check that

No More Posting New Topics!

computed refresh too often