在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):
然后从轻松理解JS函数节流和函数防抖中找到了解决办法,就是函数节流(节流阀):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。
/跑龙套/util.js:
gapTime函数节流阀(fn) {
如果(gapTime==null | | gapTime==未定义){
gapTime=1500
}
让_lastTime=零
返回函数(){
让_nowTime=+新日期()
如果(_nowTime - _lastTime祝辞gapTime | | ! _lastTime) {
fn ()
_lastTime=_nowTime
}
}
}
模块。出口={
节流:节气门
}/页面/节流/throttle.wxml:
& lt;按钮bindtap=傲贰笔菁?' abc '祝辞tap/页面/节流/throttle.js
const util=要求(“. ./. ./跑龙套/util.js”)
页面({
数据:{
文本:“tomfriwel”
},
alt="微信小程序防止多次点击跳转(函数节流)">
出现这种情况的原因是节流返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件按钮传递的参数是在新函数里,所以我们需要把这些参数传递给真正需要执行的函数fn。
最后的节流函数如下:
gapTime函数节流阀(fn) {
如果(gapTime==null | | gapTime==未定义){
gapTime=1500
}
让_lastTime=零//返回新的函数
返回函数(){
让_nowTime=+新日期()
如果(_nowTime - _lastTime祝辞gapTime | | ! _lastTime) {
fn。应用(这个参数)//将这个和参数传给原函数
_lastTime=_nowTime
}
}
}
再次点击按钮和e都有了:
参考
轻松理解JS函数节流和函数防抖
以上所述是小编给大家介绍的微信小程序防止多次点击跳转(函数节流),希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
