Vue使用自定义指令实现按钮防抖功能，防止多次调接口

- 首先什么是防抖？（防抖：多次触发 只执行最后一次）

防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

• 防抖就是指☞触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。说到防抖大家应该会想到节流，两者cp哈哈哈。

• 主要应用场景有：
  1、登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
  2、调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
  3、文本编辑器实时保存，当无任何更改操作一秒后进行保存
  防抖实现思路
  

function throttle(fn, delay){
   
    let timer;
    return function(){
   
      if (timer) {
   
        return;
      }
      let _this = this;
      let _arg = arguments;
      timer = setTimeout(function(){
   
        fn.apply(_this, _arg);
        timer = null;
      }, delay);
    }
  }

• 项目场景

在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。

在日常的开发中，在很多表单的提交过程中，会有保存按钮的多次点击的情况，如果不做处理，会造成数据的多次创建的情况。

方法一：使用vue自定义指令

• Vue项目中使用自定义指令实现按钮防抖功能，防止多次调接口

 在directive.js文件
import Vue from