미니 프로그램은 기능 조절을 사용하여 여러 페이지 점프 문제를 해결합니다.

이 기사에서는 작은 프로그램이 기능 조절을 사용하여 여러 페이지 건너뛰기 문제를 해결하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

미니 프로그램을 사용할 때 상황이 있습니다. 네트워크 상태가 좋지 않거나 중단되면 사용자는 클릭이 유효하지 않다고 생각하여 여러 번 클릭하고 결국 페이지로 여러 번 이동하는 문제입니다. JS의 기능 조절 및 손떨림 방지 기능을 통해 해결할 수 있습니다.

공식 문서에 따르면 함수 제한은 이 단위 시간 내에서 이벤트를 트리거하는 콜백 함수를 한 번만 실행할 수 있다고 합니다. 효과. 따라서 .js 파일을 다음과 같이 수정하세요.

function throttle(fn, gapTime) {
if (gapTime == null|| gapTime == undefined) {
gapTime = 1500
}
let _lastTime = nullreturn function () {
let _nowTime = +new Date()
if (_nowTime -_lastTime > gapTime || !_lastTime) {
fn()
_lastTime =_nowTime
}
}
}
module.exports = {
throttle: throttle
}
/pages/throttle/throttle.wxml:
tap
/pages/throttle/throttle.js
const util = require(\'../../utils/util.js\')
Page({
data: {
text: \'tomfriwel\'
},
onLoad: function (options) {
},
tap:util.throttle(function (e) {
console.log(this)
console.log(e)
console.log((newDate()).getSeconds())
}, 1000)
})

이런 식으로 버튼을 미친 듯이 클릭하면 1초에 한 번만 실행됩니다.

하지만 이 경우에는 문제가 있습니다. 즉, this.data를 얻으려는 경우, 얻는 this가 정의되지 않거나 WeChat 구성 요소 버튼을 통해 클릭 기능에 전달된 데이터를 얻으려는 경우입니다. 또한 정의되지 않았으므로 WeChat 애플릿의 페이지 js에서 사용할 수 있도록 스로틀 기능은 여전히 ​​일부 처리를 수행해야 합니다.

이 상황의 원인은 스로틀이 더 이상 원래 기능이 아닌 새로운 기능을 반환하기 때문입니다. 새 함수는 원래 함수를 래핑하므로 구성요소 버튼을 통해 전달된 매개변수가 새 함수에 포함됩니다. 따라서 실제로 실행되어야 하는 함수 fn에 이러한 매개변수를 전달해야 합니다.

최종 스로틀 기능은 다음과 같습니다:

function throttle(fn, gapTime) {
    if (gapTime == null|| gapTime == undefined) {
        gapTime = 1500
    }
 
    let _lastTime = null// 返回新的函数 return function () {
        let _nowTime = +new Date()
        if (_nowTime -_lastTime > gapTime || !_lastTime) {
           fn.apply(this, arguments)   //将this和参数传给原函数
            _lastTime =_nowTime
        }
    }
}

이 버튼을 다시 클릭하면 e:

권장: "Mini 프로그램 개발 튜토리얼"

위 내용은 미니 프로그램은 기능 조절을 사용하여 여러 페이지 점프 문제를 해결합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!