vue 封装防抖、节流

什么是防抖节流

函数防抖 是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。

函数节流 对于短时间内大量触发同一事件（滚动事件、输入框实时搜索），那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

区别：

防抖是将多次执行变成最后一次执行；而节流是将多次执行变为每隔一段时间执行一次。

那么它们各自的使用场景有哪些呢？

防抖

• 短信验证码
• 滚动事件
• 表单重复提交
• 页面 resize 事件
• input 事件（当然也可以用节流，实现输入框实时搜索）

节流

• scroll 事件，单位时间后计算一次滚动位置
• input 事件
• 播放事件，计算进度条

函数封装

1、封装防抖节流方法

AntiShake.js

 export default {
  // 防抖
  debounce: function (fn, delay) {
    // 时间期限
    var delays = delay || 200;
    var timer;
    // 闭包
    return function () {
      // 考虑作用域，上下文环境，apply需要用到this对象
      var th = this;
      // 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn（不确定函数到底有多少个参数，用arguments来接收）
      var args = arguments;
      // 判断还在定时，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function () {
        timer = null;
        // 执行方法
        fn.apply(th, args);
      }, delays);
    };
  },
  
  // 节流 定时器 + 时间戳
  throttle: function(func, delay) {
    var timer = null
    var startTime = Date.now()
    return function() {
      // 结束时间
      var curTime = Date.now()
      // 间隔时间 = 延迟的时间 - （结束时间戳 - 开始时间戳）
      var interval = delay - (curTime - startTime)
      var th = this
      var args = arguments
      clearTimeout(timer)
      if(interval <= 0) {
        // 证明可以触发了
        func.apply(th, args)
        // 重新计算开始时间
        startTime = Date.now()
      } else {
        // 继续等待
        timer = setTimeout(func, interval)
      }
    }
  }
}

2、组件中引入

SetControl.vue

import AntiShake from "../../components/encapsulation/AntiShake.js";

3、组件中使用

 <el-button type="primary" @click="submit"> 提交 </el-button>


 methods: {
    // 防抖
    submit: AntiShake.debounce(function () {
        // 需要防抖的内容
      this.submitForm();
    }, 2000),
    
    // 提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "设置成功！",
          });
        } else {
          return false;
        }
      });
    },
 }