微信小程序函数节流多次点击跳转如何防止

在学本文的时候我们要知道函数节流是什么，函数节流与防抖的含义，接下来本文就主要和大家分享微信小程序函数节流多次点击跳转如何防止，希望对大家有用。

场景

在使用小程序的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况。

解决办法

然后从 轻松理解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 &gt; 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="'tap'" data-key="'abc'">tap</button><br>/pages/throttle/throttle.js<br>const util = require('../../utils/util.js')<br>Page({<br>    data: {<br>        text: 'tomfriwel'<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>