Vue封装防抖和节流函数

 我们写项目时，防抖和节流的使用还是比较普遍的，可以有效地避免一些不必要的麻烦。

如一些表单提交，发送验证码等为了防止用户重复点击，可以使用防抖来避免。或滚动条scroll的事件，我们可以使用节流来一段时间后计算一次滚动位置。

 函数防抖（debounce） 是指在指定的时间内，一个动作无论被频繁触发多少次，只会被执行最后一次，也就是说当调用动作过指定时间周期后，才会执行该动作，若在这指定时间周期内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。

函数节流 （throttle）是指在规定的时间周期内只执行一次，超过这个时间周期，进入下一个时间周期，还是在下一个时间周期内只执行一次，不断循环。一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

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

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

一般是把这两个函数封装在utils工具文件夹中

src/utils/index.js

// 防抖函数
export function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}
// 节流函数
export function throttle(func, delay) {
  let timer;
  let lastExecTime = 0;
  return function() {
    const context = this;
    const args = arguments;
    const currentExecTime = Date.now();
    const elapsed = currentExecTime - lastExecTime;

    clearTimeout(timer);

    if (elapsed >= delay) {
      func.apply(context, args);
      lastExecTime = currentExecTime;
    } else {
      timer = setTimeout(function() {
        func.apply(context, args);
        lastExecTime = Date.now();
      }, delay - elapsed);
    }
  };
}

哪个组件需要使用这两个方法直接引用

import { debounce,throttle  } from '@/utils/index.js'; // 导入防抖和节流函数

methods: {
    // 按钮事件     防抖
    submitFormOk: debounce(function() {
      console.log('我被执行了');
  }, 1000), // 1000毫秒的防抖延迟
    // 按钮事件     // 节流
    submitFormOk: throttle(function() {
      console.log('我被执行了');
  }, 1000), // 1000毫秒的节流延迟
}