Compartilhamento de tecnologia

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

1. Use plano de fundo

A função anti-vibração é, na verdade, uma habilidade necessária para alunos front-end. Sempre fui preguiçoso e peguei emprestado o carregamento de páginas ou botões para alcançá-lo. Recentemente, estou desenvolvendo um miniaplicativo WeChat. Muito carregamento trará uma experiência ruim. Ao mesmo tempo, não é fácil usar o carregamento para evitar tremores ao pular para a página. Portanto, vários cliques consecutivos farão com que a página seja cortada várias vezes, por isso temos que usar a função anti-vibração para conseguir isso.

2. Implementação de código

Sem mais delongas, vamos direto ao 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

Também vi muitas funções encapsuladas escritas por outros alunos. Elas ou não aceitam parâmetros formais, resultando em parâmetros externos que não podem ser obtidos na função anti-vibração, ou a definição do temporizador é lançada na função, fazendo com que ela seja reiniciada. toda vez que clico. Defina um cronômetro, mas não atinge o objetivo de limpar o cronômetro.

3. Aplicação prática

3.1 Implementar anti-vibração 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 Implementação de anti-vibração de interação de página

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

No momento, os dois acima são os aplicativos mais comuns. Se você gostar, dê um joinha.