Vue中防抖與節流的使用

Vue中防抖與節流的使用

場景：點擊按鈕下載資源，防止服務器壓力過大，前端使用節流或者防抖；

一、防抖與節流介紹

1、防抖(debounce)：觸發高頻事件后 n 秒內函數只會執行一次，如果 n 秒內高頻事件再次被觸發，則重新計算時間；

2、節流(thorttle)：高頻事件觸發，但在 n 秒內只會執行一次，所以節流會稀釋函數的執行頻率；

區別：防抖動是將多次執行變為最后一次執行，節流是將多次執行變成每隔一段時間執行。

// 防抖
 function debounce(fn, time) {
      let _arguments = arguments
      let timeout = null
      return function () {
          if (timeout) {
              clearTimeout(timeout)
          }
          timeout = setTimeout(() => {
              fn.call(this, _arguments)
          }, time);
      }
  }

// 節流
 function throttle(fn, time) {
      let _arguments = arguments
      let canRun = true 
      return function () {
          if (!canRun) return
          canRun = false
          setTimeout(() => {
              fn.call(this, _arguments)
              canRun = true
          }, time);
      }
  }

二、防抖與節流在Vue中的使用

點擊button按鈕導出文件，需要傳遞data參數，寫法如下：

1、防抖

寫法1：

頁面標簽：

<el-button type="primary" @click="debounceExport(filters)" style="width:76px" class="commonBtn">導出</el-button>

data定義：

data() {
        return {
            filters: {
                areaId: '',
                date: '',
            },
            timer: null,
        };
    },

methods定義：

methods:{
    // 導出
        exportDetail({ areaId = '', date = '' } = {}) {
            window.location.href = xxxx url;
            if (this.timer) { // 執行下載后清除定時器
                clearTimeout(this.timer);
            }
        },
        //防抖
        debounce(fn, delay) {
            // var timer = null; // 維護一個 timer 因為Vue組件this，定義一個全局的timer
            var _this = this; // 取debounce執行作用域的this
            return function () {
                var args = arguments;
                console.log(123, _this.timer)
                if (_this.timer) {
                    clearTimeout(_this.timer);
                }
                _this.timer = setTimeout(function () {
                    fn.apply(_this, args); // 用apply指向調用debounce的對象，相當於_this.fn(args);
                }, delay);
            }
        },
        debounceExport(content) {
            this.debounce(this.exportDetail, 1000)(content);
        },
}            

寫法2：

頁面標簽：

<el-button type="primary" @click="debounceExport(filters)" style="width:76px" class="commonBtn">導出</el-button>

data定義：

data() {
        return { filters: { areaId: '', date: '', }, timer: null,
　　　　　　　debounceFn: null, }; },

初始化變量：

created(){
    this.debounceFn = this.debounce(this.exportDetail, 1000);
}

methods定義：

methods:{
    　　// 導出
        exportDetail({ areaId = '', date = '' } = {}) { window.location.href = xxxx url; if (this.timer) { // 執行下載后清除定時器 clearTimeout(this.timer); } }, //防抖  debounce(fn, delay) { // var timer = null; // 維護一個 timer 因為Vue組件this，定義一個全局的timer var _this = this; // 取debounce執行作用域的this return function () { var args = arguments; if (_this.timer) { clearTimeout(_this.timer); } _this.timer = setTimeout(function () { fn.apply(_this, args); // 用apply指向調用debounce的對象，相當於_this.fn(args);  }, delay); } }, debounceExport(content) { this.debounceFn(content); }, } 

2、節流

頁面標簽：

<el-button type="primary" @click="throttleExport(filters)" style="width:76px" class="commonBtn">導出</el-button>

data與methods定義：

data(){

　　return {
　　　　filters:{
　　　　　　areaId:'',
　　　　　　date:'',
　　　　}
　　　　canRun: true,
　　}

}
method:{
  　　　　// 節流
        throttle(fn, time) {
            // let canRun = true;
            let _this = this;
            return function () {
                let _arguments = arguments;
                if (!_this.canRun) return;
                _this.canRun = false;
                setTimeout(() => {
                    fn.apply(_this, _arguments);
                    _this.canRun = true;
                }, time);
            }
        },
        throttleExport(content) {
            this.throttle(this.exportDetail, 1000)(content);
        },

　　　　　// 下載

        exportDetail({ areaId = '', date = '' } = {}) {

            window.location.href = xxxx url ;

        },

　　}