vue 函數節流

背景:

　　今天客戶在測試的時候,我發現了一個問題,那就是,客戶喜歡連續點擊一個按鈕,這時就會出現很多問題,最大的問題就是前段的ajax並發問題,因為客戶的連續點擊,同時發送多個請求,如果前面的請求響應比后面的請求響應的時間晚,前面的數據就會覆蓋后面的數據,這也是一個常見的問題吧

解決方案:

使用大家眾所周知的解決辦法,函數節流

函數的節流,應該是個學JS的應該就知道,當初的阿里的月餅門事件.. 就不多說了

首先需要定義一個周期延遲函數,記得定義定時器句柄

data () {
    return {
      // 設置定時器的句柄，用來緩存的
      timer: null
    };
  },

fnThrottle (method, delay, duration) {
        var that = this;
        var timer = this.timer;
        var begin = new Date().getTime();
        return function(){
          var context = that;
          var args = arguments;
          var current = new Date().getTime();
          clearTimeout(timer);
          if(current-begin>=duration){
            method.apply(context,args);
            begin=current;
          }else{
            console.log(delay)
            that.timer=setTimeout(function(){
              method.apply(context,args);
            },delay);
          }
        }
      }

然后重復定義一個執行函數

nextMat2:function(){
        this.fnThrottle(this.nextMat, 1000, 1000)();
      },

而nextMat就是真實執行函數

 nextMat:function() {
    console.log("我是真實執行函數")      
}

然后在上面的標簽中指定為執行函數就可以了

節流的時間按需求指定

當然這只是一個簡單粗暴的方法,具體的功能模塊化什么的,由大家自己優化

作者：彼岸舞

時間：2020\10\29

內容關於：工作中用到的小技術

本文來源於網絡，只做技術分享，一概不負任何責任