vue项目中使用全局自定义指令实现按钮防抖功能

什么是防抖以及其作用？

在Vue.js中，防抖（Debouncing）是一种优化手段，主要用于限制在短时间内频繁触发的事件（比如输入框内容变化、窗口大小调整、滚动事件等）的执行频率，以提升性能和用户体验。

防抖函数会在事件触发后延迟一定的时间再执行，如果在延迟期间内该事件再次被触发，则重新计算延迟时间。这样，只有在最后一次事件触发后的延迟时间内没有新的事件触发，防抖函数才会执行。

这种机制有效地减少了事件的执行次数，尤其是在用户进行连续操作时（例如快速输入文字或连续点击按钮），可以避免无谓的计算和DOM操作，从而减少浏览器的渲染压力，提高页面的响应速度。

按钮防抖功能的具体实现方式

实现方式

当点击事件持续触发时，一个定时器会重新开始计时，只有在定时器间隔中没有新的事件触发时，该事件才会得到响应。

实现代码

export const directives = (app:any) => {
    app.directive('debounce' , {
        // 自定义指令挂载时的处理逻辑
        // vue3中的生命周期方法，el:当前指令绑定的元素，binding:当前指令对象，binding.value:指令绑定的值
        // 当指令挂载到元素上时触发
        mounted(el:any,binding:any){
            // 判断指令绑定的值是否为函数，如果不是则直接返回
            if(typeof binding.value !== 'function') return
            // 初始化定时器为null
            el.timer = null
            // 定义事件处理函数
            el.handler = function() {
                // 如果定时器存在，则清除定时器
                if(el.timer) {
                    clearTimeout(el.timer)
                }
                // 设置定时器，600毫秒后执行指令绑定的函数
                el.timer = setTimeout(() => {
                    binding.value()
                }, 600)
            }
            // 为元素添加点击事件监听器
            el.addEventListener('click',el.handler)
        },
        // 自定义指令卸载前的处理逻辑
        // 当指令从元素上卸载时触发
        beforeUnmount(el:any,binding:any){
            // 如果定时器存在，则清除定时器
            if(el.timer){
                el.timer = null;
                clearTimeout(el.timer)
            }
            // 移除元素的点击事件监听器
            el.removeEventListener('click',el.handler)
        }
    })
}

具体应用方式

1. 在main.ts中引入文件

import {directives} from './utils/common'
directives(app)

      2. 在需要应用的地方使用 v-debounce指令，绑定防抖函数

<script setup lang='ts'>
    const Change = () => {
        
    }
</script>

<template>
    <!-- 通过指令方式实现防抖功能  v-开头 后面为防抖函数中设置的debounce   -->
    <button v-debounce="Change">按钮</button>
</template>

<style scoped>

</style>