Encapsulación de función antivibración de operación de página frontal y application

Encapsulación y aplicación de la función antivibración de operación de página frontal

2024-07-12

1. Usar fondo

La función anti-vibración es en realidad una habilidad necesaria para los estudiantes de front-end. Siempre he sido vago y tomé prestada la carga de páginas o la carga de botones para lograrlo. Recientemente, estoy desarrollando un subprograma WeChat. Demasiada carga traerá una mala experiencia. Al mismo tiempo, no es fácil usar la carga para evitar sacudidas al saltar a la página. Por lo tanto, habrá situaciones en las que varios clics consecutivos cortarán la misma página varias veces, por lo que debemos utilizar la función anti-vibración para lograrlo.

2. Implementación del código

Sin más preámbulos, vayamos directo al código.

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

También he leído muchas funciones encapsuladas escritas por otros estudiantes. O no aceptan parámetros formales, lo que hace que los parámetros externos no estén disponibles en la función anti-vibración, o la definición del temporizador se incluye en la función, lo que hace que esté disponible. Se reinicia cada vez que hago clic en Definir un temporizador, pero no logra el propósito de borrar el temporizador.

3. Aplicación práctica

3.1 Implementar anti-vibración de salto de página


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 Implementación de anti-vibración de interacción de página

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

En la actualidad, las dos anteriores son las aplicaciones más comunes. Si te gusta, dale el visto bueno.

Compartir tecnología