Condivisione della tecnologia

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

1. Usa lo sfondo

La funzione anti-shake è in realtà un'abilità necessaria per uno studente front-end. Sono sempre stato pigro e ho preso in prestito il caricamento della pagina o il caricamento dei pulsanti per ottenerla. Recentemente, sto sviluppando un'applet WeChat. Un caricamento eccessivo porterà a una brutta esperienza. Allo stesso tempo, non è facile utilizzare il caricamento per evitare tremori quando si passa alla pagina. Pertanto, più clic consecutivi causeranno il taglio della pagina più volte, quindi dobbiamo utilizzare la funzione anti-shake per ottenere questo risultato.

2. Implementazione del codice

Senza ulteriori indugi, passiamo direttamente al codice.

/* 防抖函数封装 */
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

Ho anche visto molte funzioni incapsulate scritte da altri studenti. O non accettano parametri formali, risultando in parametri esterni che non possono essere ottenuti nella funzione anti-shake, oppure la definizione del timer viene inserita nella funzione, provocandone il riavvio. ogni volta che clicco Definisci un timer, ma non raggiunge lo scopo di azzerare il timer.

3. Applicazione pratica

3.1 Implementare l'anti-shake per il salto di pagina

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 Implementazione dell'anti-shake per l'interazione della pagina

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

Al momento, le due precedenti sono le applicazioni più comuni. Se ti piace, ti preghiamo di dargli un pollice in su.