分享一个vue3简单的防抖

<el-input v-model="formInline" @input="onInput"/>

let timers = null;
// 防抖 input改变
const onInput = () =>{
  clearTimeout(timers);
  timers = setTimeout(()=>{
     console.log('防抖');
  },500)//多久时间内执行一次
}

  • 7
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个基于 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、付费专栏及课程。

余额充值