vue3 TS防抖函数
目录
封装工具
useDebounce.ts
//防抖函数
type CallbackFn = (item?: any) => void
let timer: any = null
export default function (Callback: CallbackFn, delay = 1000) {
timer != null ? clearTimeout(timer) : null
timer = setTimeout(() => {
Callback && Callback() //当有值才会执行
}, delay)
}
使用
AreaSeach.vue
<template>
<div>
出发地区:<input type="text" v-model="beginArea" />
<div>
</template>
<script setup lang="ts">
import { ref,watch } from 'vue'
import useDebounce from '@/utils/useDebounce'
const beginArea=ref('')
//1.监听搜索关键字
watch(beginArea, (newValue) => {
useDebounce(() => {
console.log(newValue)
//要执行逻辑、方法、
//调用axios、完成防抖
})
})
//更多玩法期待您的探索
</script>