vue3+js 实现按钮防抖，避免请求重复提交

vue2 参考：https://blog.csdn.net/csdnyp/article/details/124273358

目录

 1、新建 preventReClick.js

 2、main.js引入

 3、按钮上使用

放个小概念：

防抖：在规定时间连续多次触发事件，回调函数只会执行最近的一次，因为如果在这个规定时间内又触发了该事件，会重置定时器，重新计算这个规定时间

或

触发事件后在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间

节流：当持续触发事件时，在规定时间段内只能调用一次回调函数。如果在规定时间内又触发了该事件，则什么也不做,也不会重置定时器

区别：防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次。一般不会重置定时器. 即不会if (timer) clearTimeout(timer);(时间戳+定时器版除外)

为什么要对按钮进行防抖操作？假如页面有一个查询按钮，用户恶意多次点击这个按钮，就会造成大量发起这个请求的现象，可能会造成页面卡顿

 1、新建 preventReClick.js

export default (app) => {
    app.directive('preventReClick', {
        mounted(el, binding) {
            el.addEventListener('click', () => {
                if (!el.disabled) {
                    el.disabled = true
                    setTimeout(() => {
                        el.disabled = false
                    }, binding.value || 2000)
                }
            })
        }
    })
}

 2、main.js引入

import {createApp} from 'vue'
import preventReClick from './assets/js/preventReClick'

const app = createApp(App)

app.use(preventReClick)
app.mount('#app')

 3、按钮上使用

<el-button type="primary" size="medium" @click="submit" v-preventReClick >确 定</el-button>