Technologieaustausch

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

1. Verwenden Sie den Hintergrund

Funktion Anti-Shake ist eigentlich eine notwendige Fähigkeit für einen Front-End-Studenten. Ich war immer faul und habe mir das Laden von Seiten oder Schaltflächen ausgeliehen, um dies zu erreichen. Kürzlich entwickle ich ein WeChat-Applet. Zu viel Laden führt zu einer schlechten Erfahrung. Gleichzeitig ist es nicht einfach, das Laden zu verwenden, um ein Wackeln beim Aufrufen der Seite zu verhindern. Daher führen mehrere aufeinanderfolgende Klicks dazu, dass die Seite mehrmals ausgeschnitten wird. Daher müssen wir die Anti-Shake-Funktion verwenden, um dies zu erreichen.

2. Code-Implementierung

Kommen wir ohne weitere Umschweife direkt zum 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

Ich habe auch viele gekapselte Funktionen gesehen, die von anderen Studenten geschrieben wurden. Entweder akzeptieren sie keine formalen Parameter, was dazu führt, dass externe Parameter nicht in der Anti-Shake-Funktion abgerufen werden können, oder die Timer-Definition wird in die Funktion geworfen, was dazu führt, dass sie neu gestartet wird Jedes Mal, wenn ich klicke, wird ein Timer definiert, aber der Zweck, den Timer zu löschen, wird nicht erreicht.

3. Praktische Anwendung

3.1 Implementieren Sie den Seitensprung-Anti-Shake

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 Implementierung von Seiteninteraktions-Anti-Shake

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

Derzeit sind die beiden oben genannten Anwendungen die häufigsten. Wenn es Ihnen gefällt, geben Sie ihm bitte einen Daumen nach oben.