How to prevent multiple click jumps caused by WeChat mini program function throttling

When studying this article, we need to know what function throttling is, The meaning of function throttling and anti-shake, and then this article will I mainly want to share with you how to prevent multiple click jumps due to the WeChat applet function throttling. I hope it will be useful to everyone.

Scenario

When using the mini program, there will be a situation like this: when the network conditions are poor or stuck In the case of pauses, users will think that the click is invalid and click multiple times, and finally jump to the page multiple times.

Solution

Then I found the solution from Easily understand JS function throttling and function anti-shake, It is function throttling: if a function is triggered multiple times within a period of time, it will only be executed for the first time. Before the end of this period, the function will not be executed no matter how many times it is triggered.

/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>

In this way, crazy clicking on the button will only trigger once per second.

But there is a problem in this case, that is, when you want to get this.data, the this you get is undefined, or if you want to get the data e passed to the click function by the WeChat component button, it is also undefined. , so the throttle function still needs some processing to make it available in the page js of the WeChat applet.

The reason for this situation is that throttle returns a new function, which is no longer the original function. The new function wraps the original function, so the parameters passed by the component button are in the new function. So we need to pass these parameters to the function fn that actually needs to be executed.

The final throttle function is as follows:

<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>

Click the button again and both this and e are available:

Related recommendations:

How to implement a session memo applet

Detailed explanation of JavaScript functions Throttle

Detailed explanation of JavaScript function throttling concepts and usage examples

The above is the detailed content of How to prevent multiple click jumps caused by WeChat mini program function throttling. For more information, please follow other related articles on the PHP Chinese website!