asp网站如何安装,网站联系我们的地图怎么做的,asp.net网站开发与应用,仿站是什么一、前言#xff1a;为什么需要防抖节流#xff1f;
在前端开发中#xff0c;高频触发的事件#xff08;如滚动、输入、点击等#xff09;容易导致性能问题。防抖#xff08;debounce#xff09; 和 节流#xff08;throttle#xff09; 是两种常用的优化手段#x…一、前言为什么需要防抖节流
在前端开发中高频触发的事件如滚动、输入、点击等容易导致性能问题。防抖debounce 和 节流throttle 是两种常用的优化手段
防抖事件触发后等待指定时间再执行若期间重复触发则重新计时节流事件触发后立即执行并在指定时间内不再响应新触发
本文将教你如何在 Vue3 TypeScript 项目中封装一个灵活可复用的防抖/节流自定义指令。 二、实现思路分析
1. Vue3 自定义指令基础
Vue3 提供了 app.directive() 方法注册全局指令生命周期包含
mounted元素挂载时updated元素更新时unmounted元素卸载时
2. 设计目标
支持防抖/节流模式切换可自定义延迟时间TypeScript 类型支持自动清除事件监听 三、完整代码实现
1. 创建指令文件 directives/debounceThrottle.ts
import type { App, Directive, DirectiveBinding } from vuetype ExecutableFunction (...args: any[]) void
type Strategy debounce | throttleinterface DirectiveOptions {strategy?: Strategydelay?: number
}// 策略模式实现
const strategyImplement {debounce(fn: ExecutableFunction, delay: number) {let timer: NodeJS.Timeout | null nullreturn (...args: any[]) {if (timer) clearTimeout(timer)timer setTimeout(() fn(...args), delay)}},throttle(fn: ExecutableFunction, delay: number) {let lastExecTime 0return (...args: any[]) {const now Date.now()if (now - lastExecTime delay) {fn(...args)lastExecTime now}}}
}const debounceThrottleDirective: Directive {mounted(el: HTMLElement, binding: DirectiveBindingExecutableFunction) {const { value: fn } bindingconst { strategy debounce, delay 300 }: DirectiveOptions binding.modifiers || {}if (typeof fn ! function) {throw new Error(v-debounce-throttle requires a function as the value)}// 通过策略模式选择实现const executor strategyImplement[strategy](fn, delay)// 存储到元素属性以便后续更新和卸载el._debounceThrottleHandler executorel.addEventListener(click, executor)},updated(el, binding) {// 当参数变化时重新绑定el.removeEventListener(click, el._debounceThrottleHandler)debounceThrottleDirective.mounted(el, binding)},unmounted(el) {el.removeEventListener(click, el._debounceThrottleHandler)delete el._debounceThrottleHandler}
}// 扩展HTMLElement类型声明
declare global {interface HTMLElement {_debounceThrottleHandler?: (...args: any[]) void}
}export function setupDebounceThrottleDirective(app: App) {app.directive(debounce-throttle, debounceThrottleDirective)
}2. 在 main.ts 中注册
import { createApp } from vue
import App from ./App.vue
import { setupDebounceThrottleDirective } from ./directives/debounceThrottleconst app createApp(App)
setupDebounceThrottleDirective(app)
app.mount(#app)四、使用示例
1. 基础用法默认防抖300ms
templatebutton v-debounce-throttlehandleClick提交/button
/template2. 指定节流模式
button v-debounce-throttle.throttlehandleScroll滚动处理/button3. 自定义延迟时间
input v-debounce-throttle:input.throttlehandleInputinput(e) $emit(update:modelValue, e.target.value)
/五、关键实现解析
策略模式通过对象字面量实现不同策略的快速切换类型安全使用TS接口规范参数类型内存管理在unmounted阶段自动移除监听参数更新处理updated生命周期实现动态参数更新元素属性扩展通过HTMLElement接口扩展存储处理方法 六、常见应用场景
搜索框输入联想防抖防止按钮重复点击节流滚动事件处理节流窗口resize事件防抖canvas绘图高频事件节流 七、总结
通过封装这个自定义指令我们实现了
✅ 统一的防抖/节流处理逻辑✅ 灵活的策略和参数配置✅ 完善的TS类型支持✅ 自动化的内存管理
在项目中合理使用可以有效提升应用性能同时保持代码的整洁和可维护性。后续可以继续扩展支持更多事件类型和配置项打造更强大的指令库。
