Vue3自定义防抖函数

1.新建fun.ts文件,内容如下 

  export const debounce = (fn: Function, delay = 500) => {
	let timer: number | null = null;
	return (...args: any[]) => {
	  if (timer) {
		clearTimeout(timer);
	  }
	  timer = setTimeout(() => {
		fn(...args);
	  }, delay);
	}
  } 

2在vue页面中引用

import {   debounce  } from '../../Fun';

3.具体使用方法

const MyClicke= debounce((evt:any) => {
	// ---- ^ 业务逻辑 ----
console.log('debounce =>', evt)
 
}, 3000)

### 创建 Vue 3 自定义防抖和节流指令 #### 防抖 (Debounce) 指令实现 为了在 Vue 3 中创建一个防抖指令,需要利用 Composition API 和自定义指令的生命周期钩子。下面展示了一个简单的 `v-debounce` 指令实现: ```javascript import { nextTick } from &#39;vue&#39;; const debounceDirective = { mounted(el, binding) { let timeout; el.addEventListener(&#39;input&#39;, () => { const callback = binding.value || Function.prototype; clearTimeout(timeout); timeout = setTimeout(() => { callback(); }, binding.arg || 300); // 默认延迟时间为300毫秒 }); }, }; export default debounceDirective; ``` 此代码片段展示了如何监听输入事件,并通过设置定时器来控制回调函数的触发频率[^1]。 #### 节流 (Throttle) 指令实现 对于节流功能,则是在一定时间内只允许一次操作被执行。这里提供了一种基于时间戳的方式去实现 `v-throttle` 指令: ```javascript import { onMounted, onUnmounted } from &#39;vue&#39;; const throttleDirective = { beforeMount(el, binding) { let lastExecTime = 0; function handleEvent(event) { const now = new Date().getTime(); if ((now - lastExecTime) >= (binding.arg || 500)) { // 设置默认间隔为500ms lastExecTime = now; const handler = binding.value; handler && handler(event); } } el._throttledHandler = handleEvent; // 存储处理器以便稍后移除 [&#39;click&#39;].forEach(eventName => el.addEventListener(eventName, el._throttledHandler)); }, unmounted(el) { [&#39;click&#39;].forEach(eventName => el.removeEventListener(eventName, el._throttledHandler)); } }; export default throttleDirective; ``` 这段代码实现了点击事件上的节流效果,在组件卸载时还会清理掉已添加的事件监听器以防止内存泄漏[^2]。 #### 注册全局指令 最后一步就是将这两个指令注册成为全局可用的形式: ```javascript // main.js 或入口文件中 import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import vDebounce from &#39;./directives/v-debounce&#39;; // 假设保存路径如此 import vThrottle from &#39;./directives/v-throttle&#39;; createApp(App).directive(&#39;debounce&#39;, vDebounce).directive(&#39;throttle&#39;, vThrottle).mount(&#39;#app&#39;); ``` 这样就可以在整个应用程序范围内使用 `<template>` 标签内的 `v-debounce` 和 `v-throttle` 属性了[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值