技術共有

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

1.背景を使用する

関数の手ぶれ補正は、実際にはフロントエンドの学生にとって必要なスキルであり、私は常に怠惰で、それを達成するためにページの読み込みやボタンの読み込みを借用してきました。最近、WeChat アプレットを開発しています。ロードが多すぎると、ページにジャンプするときに揺れを防ぐためにロードを使用するのは簡単ではありません。したがって、複数の連続クリックによって同じページが複数回カットされる状況が発生するため、これを実現するには手ぶれ補正機能を使用する必要があります。

2. コードの実装

早速、コードに進みましょう。

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

また、他の学生が書いた多くのカプセル化された関数も読みました。それらは仮パラメータを受け入れず、手ぶれ補正関数で外部パラメータが使用できなくなったり、タイマー定義が関数にスローされて、手ぶれ補正関数が使用できなくなったりします。タイマーを定義するとクリックするたびに再起動されますが、タイマーをクリアするという目的は達成されません。

3. 実用化

3.1 ページジャンプ手ぶれ補正の実装

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 ページインタラクション手ぶれ補正の実装

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

現在のところ、上記の 2 つが最も一般的なアプリケーションです。気に入っていただけましたら、高評価をお願いします。