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

项目场景

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

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

1. 设置防抖，在按钮上进行防抖处理，规定时间内只会执行一次。
2. 在提交按钮上添加loading效果，通过loading状态防止多次点击。
3. 在接口处进行防抖处理，防止同一接口的多次调用。

实现思路

• 首先，我们需要定义一个延迟执行的方法
• 其次，如果在延迟时间内再调用了该方法，则需要重新计算执行时间
• 在满足时间的情况下，执行逻辑

实现效果

实现代码

<template>
  <div>
  	 <div class="btn-debounce"><el-button v-debounce="debounceClick">防抖</el-button></div>
  </div>
</template>

<script>
import debounce from '../../directive/test/debounce'
export default {
  directives: {
    debounce
  },
  data(){
    return{
    }
  },
  methods:{
     debounceClick(){
      console.log('只触发一次！！！')
    }
  }
}
</script>

<style lang="scss">
</style>

debounce.js文件如下：

const debounce = {
  inserted: function (el, binding) {
    let timer
    el.addEventListener('click', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 1000)
    })
  },
}

export default debounce

如有疑问，欢迎评论区留言。