【React】实现一个基本的防抖函数

函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间（在这里和函数节流区分一下，函数节流是在触发完事件之后的一段时间之内不能再次触发事件）。

实现：

　　

//创建防抖函数
import { useRef } from "react";

export function useDebounce<T extends (...args: any[]) => void>(fn: T, delay: number) {
    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);

    return (...args: Parameters<T>) => {
        if (timer.current) {
            clearTimeout(timer.current);
        }

        timer.current = setTimeout(() => {
            fn(...args);
            timer.current = null;
        }, delay);
    };
}

//创建触发函数
const handleChangeMarkers = useDebounce((lat: number, lng: number) => {
    const newMarkers = markers?.map((marker: any, index: number) => {
        if (index + 1 == currentPoint) {
            const newPosition = marker.getPosition()
            newPosition.lat = lat
            newPosition.lng = lng
            marker.setPosition(newPosition)
        }
        return marker
    })
    setChangeMarkers(newMarkers)
}, 500)

handleChangeMarkers(113.625309, 34.746277)