vue自定义指令防抖与函数封装防抖

封装preventReClick.js文件

export default {
    install (Vue) {
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if(!el.disabled) {
                        el.disabled = true;
                        setTimeout(() => {
                            el.disabled = false;
                        }, binding.value || 1000);
                    }
                })
            }
        })
    }
}

在入口文件全局引入preventReClick.js

import preventReClick from "@/store/preventReClick.js"
Vue.use(preventReClick)

组件使用v-preventReClick

<el-button type="primary" size="small" v-preventReClick @click="importSubmit">开始导入</el-button>

第二种防抖、或者不用指令使用代码：

触发事件后函数会立即执行，然后n秒内不触发事件才会执行函数的效果

const delay = (function () {
    let timeout
    return (callback, ms) => {
      if (timeout) clearTimeout(timeout)
      let callNow = !timeout
      timeout = setTimeout(() => {
        timeout = undefined
      }, ms)
      if (callNow) callback.apply(this, [callback, ms])
    }
  })()
 export default {
 methods: {
  onclick(){
       delay(() => {
         
       },1000)
    }
 }
}