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 ;

        },

　　}