场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): ![](http://www.wxapp-union.com/data/attachment/portal/201801/26/094355x86oob0zoylyc0el.gif) 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。 /utils/util.js: 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()
_lastTime = _nowTime
}
}
}
module.exports = {
throttle: throttle
} /pages/throttle/throttle.wxml: <button bindtap='tap' data-key='abc'>tap</button> /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((new Date()).getSeconds())
}, 1000)
}) 这样,疯狂点击按钮也只会1s触发一次。 但是这样的话出现一个问题,就是当你想要获取this.data 得到的this 是undefined , 或者想要获取微信组件button 传递给点击函数的数据e 也是undefined ,所以throttle 函数还需要做一点处理来使其能用在微信小程序的页面js 里。 ![](http://www.wxapp-union.com/data/attachment/portal/201801/26/094705uyehn0y2vue4g2ra.jpg) 出现这种情况的原因是throttle 返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件button 传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn 。 最后的throttle 函数如下: 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
}
}
} 再次点击按钮this 和e 都有了: ![](http://www.wxapp-union.com/data/attachment/portal/201801/26/094706po8iqpwfszoppbzw.jpg) 参考
源代码
|