什么是防抖以及其作用?
在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)
}
})
}
具体应用方式
- 在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>