Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Käytä taustaa

Funktion anti-shake on itse asiassa tarpeellinen taito front-end-opiskelijalle Olen aina ollut laiska ja lainannut sivujen lataamista tai painikkeiden lataamista sen saavuttamiseksi. Viime aikoina olen kehittämässä WeChat-sovelmaa. Siksi useat peräkkäiset napsautukset aiheuttavat sivun leikkaamisen useita kertoja, joten meidän on käytettävä tärinänestotoimintoa tämän saavuttamiseksi.

2. Koodin käyttöönotto

Pidemättä puhetta mennään suoraan koodiin.

/* 防抖函数封装 */
let timer
export const debounce = (fn, delay = 500) => {
  return  (...args) => { // 传入形参！！！
      let that = this
      timer && clearTimeout(timer)
      timer = setTimeout(function () {
        console.log("防抖函数执行", args)
        fn.apply(that, args) // 用apply指向调用debounce的对象，相当于this.fn(args);
      }, delay)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

Olen myös nähnyt monia muiden opiskelijoiden kirjoittamia kapseloituja funktioita. Ne joko eivät hyväksy muodollisia parametreja, mikä johtaa ulkoisiin parametreihin, joita ei saada tärinänvaimennustoiminnossa, tai ajastimen määritelmä heitetään funktioon, jolloin se käynnistyy uudelleen. joka kerta kun napsautan Määritä ajastin, mutta se ei saavuta ajastimen tyhjentämisen tarkoitusta.

3. Käytännön sovellus

3.1 Toteuta sivuhypyn tärinän esto

export function goPage(url) {
    debounce((url) => {
    	url && wx.navigateTo({ url })
    })(url)
}

// 页面调用
goPage('.pages/home/index')
1
2
3
4
5
6
7
8
9

3.2 Sivun vuorovaikutuksen tärinän eston käyttöönotto

gotoShop(value) {
  debounce((value) => {
         // 接收外部传来的value参数，进行后续逻辑处理
     })(value) // 接收外围函数的参数，丢到防抖函数里，有兴趣的同学也可以了解一下闭包
 },
1
2
3
4
5

Tällä hetkellä yllä olevat kaksi ovat yleisimpiä sovelluksia, jos pidät siitä.