小程序数据绑定问题

Question

我想实现类似双向数据绑定的效果，但是小程序是典型的单向数据绑定，于是在手动加了一层绑定，然后发现卡顿明显，比如：

1，有一个input

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

我在changeN中用将输入的值赋值给n，一旦输入过快，会出现卡顿现象

2，比如有一个scroll，我要实现点击按钮滚动到顶部的效果

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

我在滚动时，也将当前的scroll-top赋值给y，这下就更蛋疼了，滚动条开始瞎跳。

我这两个例子的思路或者写法可能存在严重的错误，所以我想问下大家碰到这种问题是怎么解决的

Answer 1

23333，你这个是最经典的函数防抖应用场景。

使函数在一定的时间内不被再调用后执行。

也就是说，当你触发scroll或者change时，不要直接去修改数据，而是添加一个定时器来执行修改数据的操作，在下次触发函数时，清除这个定时器，然后重新设置定时器。

或者说用函数节流的方式也可以实现你的效果。

// 函数节流的实现方案
let throttleIdentify = 0
$dragable.addEventListener('mousemove', () => {
  if (throttleIdentify) return
  throttleIdentify = setTimeout(() => throttleIdentify = 0, 500)
  console.log('trigger')
})

// 函数防抖方案
let debounceIdentify = 0
window.addEventListener('resize', () => {
  debounceIdentify && clearTimeout(debounceIdentify)
  debounceIdentify = setTimeout(() => {
    console.log('trigger')
  }, 300)
})

看选择咯，目的都是限制函数执行的频率。
这里有一篇之前的博客可以参考：函数节流与函数防抖

Answer 2

从思路来看，我觉得有些问题。

“数据双向绑定”确实很好用，但也不是必须的，实际生产中很多时候还会放弃自动双向绑定，改为手绑。所以我觉得没有必要刻意追求。

所以你说的“问题”其实不是“问题”，在我看来……