鍍金池/ 問(wèn)答/GO  HTML/ 小程序數(shù)據(jù)綁定問(wèn)題

小程序數(shù)據(jù)綁定問(wèn)題

我想實(shí)現(xiàn)類似雙向數(shù)據(jù)綁定的效果，但是小程序是典型的單向數(shù)據(jù)綁定，于是在手動(dòng)加了一層綁定，然后發(fā)現(xiàn)卡頓明顯，比如：

1，有一個(gè)input

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

我在changeN中用將輸入的值賦值給n，一旦輸入過(guò)快，會(huì)出現(xiàn)卡頓現(xiàn)象

2，比如有一個(gè)scroll，我要實(shí)現(xiàn)點(diǎn)擊按鈕滾動(dòng)到頂部的效果

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

我在滾動(dòng)時(shí)，也將當(dāng)前的scroll-top賦值給y，這下就更蛋疼了，滾動(dòng)條開始瞎跳。

我這兩個(gè)例子的思路或者寫法可能存在嚴(yán)重的錯(cuò)誤，所以我想問(wèn)下大家碰到這種問(wèn)題是怎么解決的

回答
編輯回答
賤人曾

23333，你這個(gè)是最經(jīng)典的函數(shù)防抖應(yīng)用場(chǎng)景。

使函數(shù)在一定的時(shí)間內(nèi)不被再調(diào)用后執(zhí)行。

也就是說(shuō)，當(dāng)你觸發(fā)scroll或者change時(shí)，不要直接去修改數(shù)據(jù)，而是添加一個(gè)定時(shí)器來(lái)執(zhí)行修改數(shù)據(jù)的操作，在下次觸發(fā)函數(shù)時(shí)，清除這個(gè)定時(shí)器，然后重新設(shè)置定時(shí)器。

或者說(shuō)用函數(shù)節(jié)流的方式也可以實(shí)現(xiàn)你的效果。

// 函數(shù)節(jié)流的實(shí)現(xiàn)方案
let throttleIdentify = 0
$dragable.addEventListener('mousemove', () => {
  if (throttleIdentify) return
  throttleIdentify = setTimeout(() => throttleIdentify = 0, 500)
  console.log('trigger')
})

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

看選擇咯，目的都是限制函數(shù)執(zhí)行的頻率。
這里有一篇之前的博客可以參考：函數(shù)節(jié)流與函數(shù)防抖

2017年4月16日 21:08
編輯回答
近義詞

從思路來(lái)看，我覺(jué)得有些問(wèn)題。

“數(shù)據(jù)雙向綁定”確實(shí)很好用，但也不是必須的，實(shí)際生產(chǎn)中很多時(shí)候還會(huì)放棄自動(dòng)雙向綁定，改為手綁。所以我覺(jué)得沒(méi)有必要刻意追求。

所以你說(shuō)的“問(wèn)題”其實(shí)不是“問(wèn)題”，在我看來(lái)……

2018年1月24日 13:53