프런트 엔드 페이지 작업 흔들림 방지 기능 캡슐화 및 application

프런트엔드 페이지 조작 손떨림 방지 기능 캡슐화 및 적용

2024-07-12

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

현재 위의 두 가지 응용 프로그램이 마음에 들면 추천해 주세요.

기술나눔