当用户快速点击提交按钮时，会发送多个请求，为了防止这个问题，我们需要对按钮进行限制

vue项目防止按钮重复点击（重复请求接口）
1.首页先写入main.js中

// 设置点击间隔
import Vue from 'vue'
Vue.directive('preventClick', {
  inserted (el) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, 3000)
2.在button或el-button标签上绑定该指令
<button v-preventClick>普通按钮</button>
<el-button v-preventClick>Element按钮</el-button>
1.保存提交按钮不小心点击了多次。

2.由于网络服务器卡等原因点击事件没有及时响应又点击了一次，造成数据的重复提交和保存，数据的异常。

3.resize、scroll，输入框内容校验等频繁操作。

由于axios提交数据为异步提交，点击提交按钮是通过xmlhttprequest向后端发送异步请求，发送请求后后端返回数据需要时间处理，如果第一次点击的请求尚未完成，又接二连三地提交了几次，同时后面发送的请求都被后台处理了，这种情况如果是读取数据不会有太大影响，但是涉及到数据提交保存或者提交之后多表数据处理就麻烦了，而且此类现象造成的数据都不正常，所以此种情况务必要避免。

原理：当第一次触发点击事件时，不会立即执行接口，会等待监听一段时间，若在这段时间没有再次触发该事件，等待时间过后就执行接口。倘若等待时间期间监听到又点击了一次，等待时间随即重置，从最后一次点击事件开始再重新等待这段时间，等待结束后再执行接口。
1.创建防抖全局js方法
 * 防抖函数
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行 
 * @return null
let timeout = null;
const debounce = function(func, wait, immediate) {
    // 清除定时器
    if (timeout !== null) clearTimeout(timeout);
    // 立即执行，此类情况一般用不到
    if (immediate) {
        var callNow = !timeout;
        timeout = setTimeout(function() {
            timeout = null;
        }, wait);
        if (callNow) typeof func === 'function' && func();
    } else {
        // 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout = setTimeout(function() {
            typeof func === 'function' && func();
        }, wait);
2.具体引用
// 点赞、取消点赞
this.$util.debounce(this.likeCountDelete, 250, true)
缺点：接口操作不是立即调用，需要等待一定时间，倘若时间设置过长，交互感不好。若出现恶意频繁点击不停，接口就会一直反复等待下去一直不会调用。若是现象2的情况，第一次点击后接口返回数据时间过长，一旦超过这个等待时间，按钮再次被点击后还是会出现重复调用的情况。

原理：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
1.创建节流全局js方法
 * 节流原理：在一定时间内，只能触发一次
 * @param {Function} func 要执行的回调函数 
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 let timer, flag;
const throttle = function(func, wait, immediate) {
    if (immediate) {
        if (!flag) {
            flag = true;
            // 如果是立即执行，则在wait毫秒内开始时执行
            typeof func === 'function' && func();
            timer = setTimeout(() => {
                flag = false;
            }, wait);
    } else {
        if (!flag) {
            flag = true
            // 如果是非立即执行，则在wait毫秒内的结束处执行
            timer = setTimeout(() => {
                flag = false
                typeof func === 'function' && func();
            }, wait);
2.具体引用
// 点赞、取消点赞
this.$util.throttle(this.likeCountDelete, 250, true)
缺点：若是现象2的情况，第一次请求返回时间超过等待的时间，此时再次点击就会再次调用事件接口，造成数据的重复异常
三.按钮禁用控制或者loading

原理：当第一次点击按钮进入事件，按钮状态变为禁用状态，或者打开loading函数进行等待，当请求返回后台数据后按钮再恢复至可点击状态或者loading关闭
// 按钮
<el-button @click="save"  :disabled="disabledFlag">保存</el-button>
save() {
// 调用接口之前禁用按钮，防止多次点击调用接口
          this.disabledFlag = true
          // 或者打开loading等待
          this.loading.show()
          // 调用接口进行添加填报数据
          api.save({ id: this.id }).then(res => {
            // 接口返回后
            this.disabledFlag = false
            this.loading.hide()
            this.$message({
              type: 'success',
              message: "保存成功！"
          }).catch(() => {
            this.disabledFlag = false
            this.loading.hide()