WeChat 애플릿 기능 제한으로 인한 다중 클릭 점프를 방지하는 방법

이 기사를 공부할 때 기능 조절이 무엇인지 알아야 합니다. 기능 조절과 손떨림 방지의 의미 다음으로 이 글에서는 주로 WeChat 애플릿 기능 조절을 사용하여 점프하는 방법을 공유합니다. 여러 번 클릭하여 방지하세요. 모든 사람에게 도움이 되기를 바랍니다.

시나리오

미니 프로그램을 사용할 때 상황이 있습니다. 네트워크 상태가 좋지 않거나 정체되면 사용자는 클릭이 유효하지 않다고 생각하여 여러 번 클릭하다가 결국 여러 번 클릭하게 됩니다. 페이지 점프 상황이 나타납니다.

Solution

그런 다음 "JS 기능 조절 및 기능 흔들림 방지를 이해하기 쉽다"에서 해결책을 찾았습니다. 이는 기능 조절(throttle)입니다. 시간, 첫 번째 한 번만 이 기간이 끝나기 전에 함수는 몇 번이나 실행되더라도 실행되지 않습니다.

/utils/util.js:

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn()<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/>module.exports = {<br/>  throttle: throttle<br/>}<br/>/pages/throttle/throttle.wxml:<br/><button bindtap=&#39;tap&#39; data-key=&#39;abc&#39;>tap</button><br/>/pages/throttle/throttle.js<br/>const util = require(&#39;../../utils/util.js&#39;)<br/>Page({<br/>    data: {<br/>        text: &#39;tomfriwel&#39;<br/>    },<br/>    onLoad: function (options) {<br/>    },<br/>    tap: util.throttle(function (e) {<br/>        console.log(this)<br/>        console.log(e)<br/>        console.log((new Date()).getSeconds())<br/>    }, 1000)<br/>})</span>

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

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

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

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

<span style="font-size: 14px;">function throttle(fn, gapTime) {<br/>    if (gapTime == null || gapTime == undefined) {<br/>        gapTime = 1500<br/>    }<br/>    let _lastTime = null // 返回新的函数 return function () {<br/>        let _nowTime = + new Date()<br/>        if (_nowTime - _lastTime > gapTime || !_lastTime) {<br/>            fn.apply(this, arguments)   //将this和参数传给原函数<br/>            _lastTime = _nowTime<br/>        }<br/>    }<br/>}<br/></span>

버튼을 다시 클릭하면 이 버튼과 e를 모두 사용할 수 있습니다.

관련 권장 사항:

대화 메모 애플릿 구현 방법

자바스크립트 함수 조절에 대한 자세한 설명

자바스크립트 함수 조절에 대한 개념 및 사용 예에 ​​대한 자세한 설명

위 내용은 WeChat 애플릿 기능 제한으로 인한 다중 클릭 점프를 방지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!