Vue中的防抖与节流 简单总结

1.防抖功能封装如下：

export default function antiShake (fn, time){
    let timerObj = null // 定时器对象
    return function () {
        // 重新计算时间: 清除定时器，启动新的定时器任务
        clearTimeout(timerObj)
        timerObj = setTimeout(function () {
            fn()
        }, time)
    }
}

2.节流功能封装如下：

export default function throttle(fn, time) {
  let flag = true; // 开关变量, true打开，false关闭
  return function () {
    //判断开关变量flag是否打开,如果是关闭状态不向下执行
    if (!flag) return;
    // 关闭开关
    flag = false;
    setTimeout(() => {
      fn();
      flag = true; //打开
    }, time);
  };
}

3.在Vue中使用防抖和节流时：

第一步：先引入封装的模块文件例如：
import throttle from "../untils/throttle";
import antiShake from "../untils/antiShake";
第二步：在 methods 属性中调用该模块暴露的函数名称代码如下：

methods: {
    //onadd 和 onlogin 是上面定义的事件触发的函数名称
     onlogin: throttle(() => {
      console.log("需要执行的代码触发这里是节流");
    }, 2000),
    
    onadd: antiShake(() => {
      console.log("需要执行的代码触发这里是防抖");
    }, 3000),
  },