1.函数防抖

import { ref, onUnmounted } from 'vue'

export function useDebounce<T extends (...args: any[]) => any>(
    fn: T,
    delay: number = 300,
    immediate: boolean = false
) {
    const timer = ref<ReturnType<typeof setTimeout> | null>(null)
    const isWaiting = ref(false)

    const debounced = (...args: Parameters<T>) => {
        if (timer.value) {
            clearTimeout(timer.value)
        }

        if (immediate && !isWaiting.value) {
            fn(...args)
            isWaiting.value = true
        } else {
            timer.value = setTimeout(() => {
                fn(...args)
                isWaiting.value = false
                timer.value = null
            }, delay)
        }
    }

    const cancel = () => {
        if (timer.value) {
            clearTimeout(timer.value)
            timer.value = null
        }
        isWaiting.value = false
    }

    // 组件卸载时自动清理
    onUnmounted(() => {
        cancel()
    })

    return {
        debounced,
        cancel,
        isWaiting
    }
} 

其中 isWatting: true 表示当前正在等待，需等待当前函数执行之后才能继续执行，用来防止在等待期间重复调用函数

immediate 表示函数执行的时机，如果为true时，第一次执行debounced方法时，fn会立即执行，如果为false时，fn会等待delay之后执行

使用方法

const { debounced: debouncedQuery, isWaiting } = useDebounce(handleQuery, 300, false)
//debouncedQuery 是debounced函数的别名，在制定组件中使用，别名方便理解
//useDebounce 接收三个参数 1.需要包裹的函数（制定要被防抖的函数）2.delay时间 3.是否第一次立即执行