【微信小程序】小程序中的函数节流
大ga吼！ 很久没写博客咯，今天学到了一点新知识， 记录分享一下~
摘要： 小程序中的函数节流
场景： 从商城列表进入商品详情中时，或者生成，提交订单， 付款的时候， 若用户快速点击（一秒8键，母胎solo20年），则容易造成重复进入页面/生成多余订单/重复付款等等不符合实际需求的麻烦，所以作为一个优秀的web前端开发工程师（主要是产品经理比比了），需要避免这种情况！（谁tm没事一秒8键啊？？？？？？？？？？？？）
/****具体场景自己脑补****/
干货：
这里提出两种解决办法：
Fn1： 在data中设置一个变量flag，默认值为true， 点击时先取出 flag， let _flag = this.data.flag，然后将flag 取false，this.setData({ flag: false}) 再根据 _flag 的值，决定是否执行业务逻辑。对了， 最后千万别忘了在 onload 或者 onshow 或者 onunload 的时候，将 flag 取 true， 这样才能保证在业务逻辑的正常执行， 要不然的话， 代码将成为一次性代码，点一次之后后面就不再执行咯。
此种方法可满足大部分场景， 但是不够优雅， 而且缺点也很明显， 就是必须退出或卸载此页面时， 才能执行第二次业务逻辑， 所以有些场景可能不适应， 再来看第二种解决办法。
Fn2： 第二种方法就是使用函数节流，什么叫节流自己百度下，不费多少电。
直接贴代码：
data: {
pre: 0,
},
throttle (fn, delay = 2000) {
let pre = this.data.pre // 初始值是 0
let that = this
return function () {
let now = + new Date();
if(now - pre >= delay) {
fn.apply(this, arguments)
that.setData({
pre: now
})
}
}
},
toDetail () {
this.throttle(function(){
wx.navigateTo({
url: '../carDetail/carDetail?id=' + 100040
})
}, 2000)()
},
代码就是这么回事， 照抄准没错， 我快下班了， 下次有时间了再写点注释。。。。。
-------------------------------------------20191017的一点补充-----------------------------------------------------
因为许多地方都需要用到节流， 所以封装成一个方法， 用来全局调用
封装之后的效果：
这里 throttle 函数接收4个变量， me 是传入的this， 否则我们在调用的时候， throttle内部会找不到this， 从而setData失败， key 是我们设置在data中的时间初始值， 这样做有什么好处呢？ 就是我们在同一个页面需要多次节流的时候， 通过传入不同的key， 就可以单独管理每个节流点了， fn 就是我们本来要执行的函数， delay 就是点击的频率， 默认1000， 即每1秒内本事件只能执行一次， 想要再执行要等下一秒， 当然，这个你可以根据自己的需要自由设置；
function throttle (me, key, fn, delay = ) {
let pre = me.data[key]
return function () {
let now = + new Date();
if(now - pre >= delay) {
fn.apply(me, arguments)
pre = now
me.setData({
[key]: now
})
}
}
}
module.exports = {
throttle
}
调用也很简单
data: {
pre:,
},
myclick: function (e) {
let that = this
throttle(that, 'pre', function(){
console.log(111111111111)
}, )()
},
好的， 就到这里了
最近联盟出手游了， 看到一句话贼搞笑
最新文章
- Ansible 模块命令介绍
- 让代码重构渐行渐远系列（3）——string.Equals取代直接比较与非比较
- javascript实现简单多文件上传
- 黑马----JAVA异常
- 用js判断页面刷新或关闭的方法
- java1.7集合源码阅读: Stack
- 2016科幻惊悚《第五波》HD720P.中英双字
- mysql 导入数据库文件到指定数据库
- Souerce 之 图片格式
- MLlib 中的聚类和分类
- JDK自带方法实现RSA数字签名
- 代码段编辑器SnippetEditor 2.1
- Linux 下的下载文件命令
- 《JavaScript 闯关记》之原型及原型链
- 解决tomcat部署项目中碰到的几个问题
- React 中的key值
- RN页面获取组件位置和大小的方法
- python遍历文件
- [docker][win10]安装的坑
- B类——Stas and the Queue at the Buffet