Mini Program's data binding problem

I want to achieve an effect similar to two-way data binding, but Mini Program is a typical one-way data binding, so I add a layer of binding manually and find that stutter is obvious, for example:

1, there is an input

<input value={{n}} bindinput="changeN">

I assign the input value to n in changeN. If I type it too fast, it will stutter

.

2, for example, if there is a scroll, I want to achieve the effect of clicking the button to scroll to the top

<scroll-view scroll-top="{{y}}" bindscroll="changeY"></scroll-view>

when I was scrolling, I also assigned the current scroll-top to y, which made it even more painful, and the scroll bar began to jump blindly.

there may be serious mistakes in the thinking or writing of my two examples, so I would like to ask you how to solve this problem

Mar.04,2021

23333, this is the most classic function anti-shake application scenario.

causes the function to be executed after it is no longer called for a certain period of time.

that is, when you trigger scroll or change , do not modify the data directly, but add a timer to modify the data, clear the timer the next time the function is triggered, and then reset the timer.

or function throttling can also achieve your effect.

 

from a point of view, I think there are some problems.

"two-way data binding" is really easy to use, but it is not necessary. In actual production, we often give up automatic two-way binding and change it to hand binding. So I don't think it's necessary to pursue it deliberately.

so when you say "problem", it is not "problem", in my opinion.

Menu