介绍 function 节流阀(fn, gapTime), {
if (gapTime ==,零| |,gapTime ==,未定义),{
gapTime =1500
}
let _lastTime =, nullreturn function (), {
let _nowTime =, + new 日期()
if (_nowTime -_lastTime 祝辞,gapTime | |, ! _lastTime), {
fn ()
_lastTime =_nowTime
}
}
}
module.exports =, {
节流:节流
}/页面/节流/throttle.wxml:
利用/页面/节流/throttle.js
const util =,要求(\ & # 39;. ./. ./跑龙套util.js \ & # 39;)
页面({
数据:{
文本:\ & # 39;tomfriwel \ & # 39;
},
onLoad: function (选项),{
},
水龙头:util.throttle (function (e), {
console.log(这)
console.log (e)
console.log (newDate ()) .getSeconds ())
},,1000)
}) function 节流阀(fn, gapTime), {
,,,if (gapTime ==,零| |,gapTime ==,未定义),{
,,,,,,,gapTime =1500
,,,}
,
,,,let _lastTime =,零//,返回新的函数,return function (), {
,,,,,,,let _nowTime =, + new 日期()
,,,,,,,if (_nowTime -_lastTime 祝辞,gapTime | |, ! _lastTime), {
,,,,,,,,,,fn.apply(,,参数),,,//将这和参数传给原函数
,,,,,,,,,,,_lastTime =_nowTime
,,,,,,,}
,,,}
}
这篇文章主要介绍了小程序使用函数节流解决页面多次跳转的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,这个问题可以通过<强> JS中的函数节流强和函数防抖找到解决方法。
根据官方文档介绍,函数节流就是规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效,因此修改。js文件如下:
这样,疯狂点击按钮也只会1 s触发一次。
但是这样的话出现一个问题,就是当你想要获取。数据得到的这个是未定义的,或者想要获取微信组件按钮传递给点击函数的数据e也是未定义的,所以节流函数还需要做一点处理来使其能用在微信小程序的页面js里。
出现这种情况的原因是节流返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件按钮传递的参数是在新函数里,所以我们需要把这些参数传递给真正需要执行的函数fn。
最后的节流函数如下:
再次点击按钮和e都有了:
感谢你能够认真阅读完这篇文章,希望小编分享的“小程序使用函数节流解决页面多次跳转的示例”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
