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

• 首先什么是防抖？

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

• 主要应用场景有：
  a、scroll事件滚动触发，
  b、搜索框输入查询
  c、表单验证
  d、按钮提交事件
  e、浏览器窗口缩放，resize事件

• 什么是节流？

• 节流是指连续触发事件但是在n秒钟只执行一次。

主要应用场景：
a、DOM元素的拖拽功能实现
b、射击游戏类
c、计算鼠标移动的距离
d、监听scroll事件

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

• 项目场景

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

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

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

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

 在directive.js文件
import Vue from 'vue'
/*
  按钮防抖动指令
*/
Vue.directive('debounce', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3 * 1000)
      }
    })
  }
})`

//页面中使用
<template>
  <div>
  	 <el-button v-debounce>防抖</el-button>
  </div>
</template>

<script>
import debounce from '../../directive/test/debounce'
</script>

• 防止多次调接口?

• 1.使用vue自定义指令,规定时间内只会执行一次。

• 2.在提交按钮添加loading，通过loading状态防止多次点击。

• vue自定义指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad

• 

• 

方法二：vue 使用 lodash 防抖，节流

代码如下：

//1.在项目中安装
npm i --save lodash.debounce

<button @click=“handleClick”>下载按钮</button>

//2.页面使用：使用场景点击按钮调接口，按钮防抖功能
//引入代码
import debounce from 'lodash.debounce'

//在 vue 里面的 created 声明周期或者是 mounted 生命周期中写
mounted() {
    this.debouncedCallback = debounce(function() {
      // 请求后台的代码...
      downLoadInfo({ id: this.rowId }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
          this.dialogTableVisible = false;
        }
      });
    }, 500);
  },
methods:{
   handleClick( row) {
      this.rowId = row.id;
      this.debouncedCallback();
    },
}

lodash：
官网：lodash官网
中文文档：中文文档
防抖 API：防抖API