【微信小程序】小程序中的函数节流

大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 = 1000) { 
  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:0,
    },

 

    myclick: function (e) {
        let that = this
        throttle(that, 'pre', function(){
　　　　　　　　console.log(111111111111)

        }, 1000)()
    },

好的， 就到这里了

最近联盟出手游了， 看到一句话贼搞笑👇👇👇👇👇👇👇👇👇

辣鸡手游王者农药， 贴膜游戏， 马桶游戏， 五个人在马桶上搓钢化膜也叫电竞？什么？lol也出手游了？那没事了， 经典重置， 重燃青春， 给我冲！