小程序使用函数节流解决页面多次跳转问题

作者 : OO资源中心 发布时间: 2020-05-10 文章热度:248 共1410个字,阅读需4分钟。 本文内容有更新 字体:

本篇文章给大家介绍一下小程序使用函数节流解决页面多次跳转问题。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

小程序使用函数节流解决页面多次跳转问题

在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,这个问题可以通过JS中的函数节流和函数防抖找到解决方法。

根据官方文档介绍,函数节流就是规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。因此修改.js文件如下:

function throttle(fn, gapTime) {
if (gapTime == null|| gapTime == undefined) {
gapTime = 1500
}
let _lastTime = nullreturn function () {
let _nowTime = +new Date()
if (_nowTime -_lastTime > gapTime || !_lastTime) {
fn()
_lastTime =_nowTime
}
}
}
module.exports = {
throttle: throttle
}
/pages/throttle/throttle.wxml:
tap
/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((newDate()).getSeconds())
}, 1000)
})

这样,疯狂点击按钮也只会1s触发一次。

但是这样的话出现一个问题,就是当你想要获取this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined,所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。

小程序使用函数节流解决页面多次跳转问题

出现这种情况的原因是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都有了:

小程序使用函数节流解决页面多次跳转问题

推荐:《》

相关推荐: 微信数据文件是什么

微信数据文件是什么? 微信的数据文件就是存储的聊天记录,接受的图片之类的文件。 微信的数据文件能够删除。具体如下: 1、打开微信。 2、点击我。 3、点击设置。 4、找到通用点击进入。 5、找到微信存储空间点击进入。 6、点击管理微信存储空间,在这里即可删除微…

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
下载资源需要解压密码,解压密码是什么?
如下载的资源需要解压密码,请查看下载页右侧查找解压密码;
如没有解压密码请尝试默认解压密码:www.oo.ink 或者 oo.ink
或者联系我们获取解压密码!
1、本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2、分享目的仅供大家学习和交流,请不要用于商业用途!
3、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
4、如有链接无法下载、失效或广告,请联系管理员处理!
5、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

OO.INK资源网 » 小程序使用函数节流解决页面多次跳转问题
+已在风雨中度过
为兴趣而改变,为梦想而努力!
+已坚持更新
时时更新,确保最新~

开通SVIP,畅享全站资源下载~

立即了解