目录

封装工具

使用

封装工具

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>