Enkapsulasi fungsi anti-guncang operasi halaman depan dan application

Enkapsulasi dan aplikasi fungsi anti-guncang operasi halaman depan

2024-07-12

1. Gunakan latar belakang

Fungsi anti-guncang sebenarnya adalah keterampilan yang diperlukan untuk siswa front-end. Saya selalu malas dan meminjam pemuatan halaman atau pemuatan tombol untuk mencapainya. Baru-baru ini, saya sedang mengembangkan applet WeChat. Terlalu banyak memuat akan membawa pengalaman buruk. Pada saat yang sama, tidak mudah menggunakan pemuatan untuk mencegah guncangan saat melompat ke halaman. Oleh karena itu, beberapa klik berturut-turut akan menyebabkan halaman terpotong beberapa kali, jadi kita harus menggunakan fungsi anti-guncangan untuk mencapai hal ini.

2. Implementasi kode

Tanpa basa-basi lagi, mari langsung ke kodenya.

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

Saya juga telah melihat banyak fungsi enkapsulasi yang ditulis oleh siswa lain. Mereka tidak menerima parameter formal, sehingga parameter eksternal tidak dapat diperoleh dalam fungsi anti-guncangan, atau definisi pengatur waktu dimasukkan ke dalam fungsi tersebut, menyebabkannya dimulai ulang. setiap kali saya mengklik. Tentukan pengatur waktu, tetapi tidak mencapai tujuan untuk menghapus pengatur waktu.

3. Penerapan praktis

3.1 Menerapkan anti-guncangan lompat halaman


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 Implementasi interaksi halaman anti-guncangan

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

Saat ini, dua aplikasi di atas adalah aplikasi yang paling umum. Jika Anda menyukainya, silakan beri acungan jempol.

Berbagi teknologi