【微信小程序】小程序中的函數節流

大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也出手游了？那沒事了， 經典重置， 重燃青春， 給我沖！