介绍 function 节流阀(fn, gapTime), {
,,,if (gapTime ==, null | |, gapTime ==,未定义),{
,,,,,,,gapTime =1500
,,,}
,,,let _lastTime =, null return function (), {
,,,,,,,let _nowTime =, +, new 日期()
,,,,,,,if (_nowTime 安康;_lastTime 祝辞,gapTime | |, ! _lastTime), {
,,,,,,,,,,,fn ()
,,,,,,,,,,,_lastTime =_nowTime
,,,,,,,}
,,,}
}
module.exports =, {
节流:才能节流
}/页面/节流/throttle.wxml:
& lt; button bindtap=& # 39;利用# 39;,数据键=& # 39;abc # 39;祝辞tap/页面/节流/throttle.js
const util =,要求(& # 39;. ./. ./跑龙套util.js& # 39;)
页面({
数据:,,,,{
,,,,,,,:,& # 39;tomfriwel& # 39;
,,,},
,,,onLoad:, function (选项),{
,,,},
,,,点击:,util.throttle (function (e), {
,,,,,,,console.log(这)
,,,,,,,console.log (e)
,,,,,,,console.log ((new 日期()).getSeconds ())
,,,},,1000)
}) function 节流阀(fn, gapTime), {
,,,if (gapTime ==, null | |, gapTime ==,未定义),{
,,,,,,,gapTime =1500
,,,}
,,,let _lastTime =, null //,返回新的函数,return function (), {
,,,,,,,let _nowTime =, +, new 日期()
,,,,,,,if (_nowTime 安康;_lastTime 祝辞,gapTime | |, ! _lastTime), {
,,,,,,,,,,,fn.apply(,,参数),,,//将这和参数传给原函数
,,,,,,,,,,,_lastTime =_nowTime
,,,,,,,}
,,,}
}
这篇文章主要介绍小程序函数节流多次点击跳转怎么防止,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<>强场景
在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况。
<强>解决办法
然后从轻松理解JS函数节流和函数防抖中找到了解决办法,就是函数节流(节流阀):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。
/跑龙套/跑龙套。js:
这样,疯狂点击按钮也只会1 s触发一次。
但是这样的话出现一个问题,就是当你想要获取。数据得到的这个是未定义的,或者想要获取微信组件按钮传递给点击函数的数据e也是未定义的,所以节流函数还需要做一点处理来使其能用在微信小程序的页面js里。
出现这种情况的原因是节流返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件按钮传递的参数是在新函数里,所以我们需要把这些参数传递给真正需要执行的函数fn。
最后的节流函数如下:
再次点击按钮和e都有了:
以上是“小程序函数节流多次点击跳转怎么防止”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
