最近在小程序开发过程中,当网络条件差或卡顿的情况下,大多数使用者会认为点击无效而进行多次点击,最后出现多次跳转甚至一直循环跳转的情况。
最后经过多次查阅以及微信小程序官方文档的介绍:
页面在跳转的时候需要一定的时间,在完成跳转前,触发该跳转的事件可能多次发生。
经过断点调试,从调试记录上可以看到触发了多次甚至连续不断的事件,从而导致多次或循环跳转。
以上问题可以通过JS中的函数节流和函数防抖找到解决方法。
例如下图所示:在开发过程中tab页在真机上出现类似问题的频率很高
具体解决方法如下:
使用函数节流(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.apply(this, arguments) //将this和参数传给原函数
_lastTime = _nowTime
}
}
}
module.exports = {
throttle: throttle
}
以上util.js文件中的fn.apply(this,arguments)是将函数的属性与方法进行拷贝(主要将this和参数传给原函数),主要是实现类的继承。
防止this.data得到的this是undefined, 或者想要获取点击函数的数据e也是undefined。
/pages/xx-list/xx-list.wxml:
<view data-current="0" bindtap="swichNav" data-current="0">11</view>
/pages/xx-list/xx-list.js:
const util = require('../../utils/util.js')
Page({
data: {
},
onLoad: function (options) {
},
swichNav: util.throttle(function (e) {
console.log(this)
console.log(e)
}, 1000),
})
以上代码可以解决页面连续跳转的问题。
大家如果有更好的方法可以分享出来哦。