Partage de technologie

Fonctionnement de la page frontale, fonction anti-tremblement, encapsulation et application

2024-07-12

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

1. Utiliser l'arrière-plan

La fonction anti-shake est en fait une compétence nécessaire pour les étudiants front-end. J'ai toujours été paresseux et j'ai emprunté le chargement de pages ou de boutons pour y parvenir. Récemment, je développe une applet WeChat. Un chargement excessif entraînera une mauvaise expérience. En même temps, il n'est pas facile d'utiliser le chargement pour éviter les tremblements lors du passage à la page. Par conséquent, il y aura des situations où plusieurs clics consécutifs couperont la même page plusieurs fois, nous devrons donc utiliser la fonction anti-tremblement pour y parvenir.

2. Mise en œuvre du code

Sans plus tarder, passons directement au code.

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

J'ai également lu de nombreuses fonctions encapsulées écrites par d'autres étudiants. Soit elles n'acceptent pas les paramètres formels, ce qui rend les paramètres externes indisponibles dans la fonction anti-shake, soit la définition de la minuterie est ajoutée à la fonction, ce qui la rend indisponible. redémarré à chaque fois que je clique sur Définir une minuterie, mais cela n'atteint pas l'objectif d'effacer la minuterie.

3. Application pratique

3.1 Implémenter l'anti-tremblement de saut de page


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 Implémentation de l'anti-shake d'interaction de page

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

À l'heure actuelle, les deux applications ci-dessus sont les applications les plus courantes. Si vous l'aimez, merci de donner un coup de pouce.