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 的防抖函数: ```javascript import { ref } from 'vue' export default function useDebounce(callback, delay = 500) { let timerId = null const isPending = ref(false) function debounce(...args) { if (timerId) { clearTimeout(timerId) } isPending.value = true timerId = setTimeout(() => { callback(...args) isPending.value = false }, delay) } return [debounce, isPending] } ``` 这个函数接收两个参数:回调函数和延迟时间(默认为 500ms)。返回值是一个数组,包含防抖函数和一个布尔值,指示当前是否有未处理的防抖事件。 使用时,你可以将该函数作为 Vue 3 组件的一个自定义 hook 使用: ```javascript import { defineComponent } from 'vue' import useDebounce from './useDebounce' export default defineComponent({ setup() { const [handleInput, isPending] = useDebounce((value) => { console.log(value) }) return { handleInput, isPending } } }) ``` 在上面的例子中,我们使用了 `useDebounce` 自定义 hook 来创建一个防抖函数 `handleInput`。当在组件中绑定输入框的 `input` 事件时,我们可以将防抖函数作为事件处理函数,如下所示: ```html <template> <input type="text" @input="handleInput($event.target.value)"> <div v-if="isPending">处理中...</div> </template> ``` 这样,每次输入框的值改变时,防抖函数都会被调用。如果在延迟时间内没有更多的输入事件发生,回调函数就会被执行,否则计时器会被重置,直到下一个延迟时间。此外,我们还可以根据 `isPending` 的值来显示一个加载指示器,以提示用户当前是否有未处理的防抖事件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值