내 연락처 정보
우편메소피아@프로톤메일.com
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
손떨림 방지 기능은 사실 프론트엔드 학생에게 꼭 필요한 기술입니다. 저는 그것을 달성하기 위해 항상 게으르고 페이지 로딩이나 버튼 로딩을 빌려왔습니다. 최근 WeChat 애플릿을 개발 중입니다. 너무 많은 로딩은 나쁜 경험을 가져올 것입니다. 동시에 페이지로 이동할 때 흔들림을 방지하기 위해 로딩을 사용하는 것도 쉽지 않습니다. 따라서 연속해서 여러 번 클릭하면 페이지가 여러 번 잘려지게 되므로 이를 위해서는 흔들림 방지 기능을 사용해야 합니다.
더 이상 고민하지 않고 바로 코드로 넘어가겠습니다.
/* 防抖函数封装 */
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)
}
}
나는 또한 다른 학생들이 작성한 많은 캡슐화된 함수를 보았습니다. 그들은 형식 매개변수를 허용하지 않아 흔들림 방지 기능에서 얻을 수 없는 외부 매개변수가 발생하거나 타이머 정의가 함수에 던져져 다시 시작됩니다. 클릭할 때마다 타이머를 정의하지만 타이머를 지우는 목적을 달성하지 못합니다.
export function goPage(url) {
debounce((url) => {
url && wx.navigateTo({ url })
})(url)
}
// 页面调用
goPage('.pages/home/index')
gotoShop(value) {
debounce((value) => {
// 接收外部传来的value参数,进行后续逻辑处理
})(value) // 接收外围函数的参数,丢到防抖函数里,有兴趣的同学也可以了解一下闭包
},
현재 위의 두 가지 응용 프로그램이 마음에 들면 추천해 주세요.