react防抖，解决接口多次请求

最新推荐文章于 2025-01-24 13:40:10 发布

元子网页开发（YYuanDot）

最新推荐文章于 2025-01-24 13:40:10 发布

阅读量388

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_54368936/article/details/140776957

版权

    useEffect(() => {//  这边走接口 可以获取到total
        debounceSearch()
    }, [current, pageSize, params])
    const debounceSearch = useDebounce((e: Event) => {
        dispatch<scheduleAction>({
            type: 'schedule/getdata',
            payload: {
                dealerId: 3, current: current, pageSize: pageSize, ...params
            },
        });
    }, 800)
    // 防抖
    function useDebounce(fn: Function, delay: number) {
        const refTimer = useRef<number>();
        return function f(...args: any) {
            if (refTimer.current) {
                clearTimeout(refTimer.current);
            }
            refTimer.current = setTimeout(() => {
                fn(args);
            }, delay);
        }
    }

本身react里面的防抖看代码里面别人使用了，照葫芦画瓢没有效果，就扒拉到了这个代码，帮我解决了useEffect的依赖三个参数有一个变化就会触发接口问题，因为我的参数会三个或者两个同事变化，看到接口打印了很多次，请求了很多，影响性能，这个能解决我当下问题，推荐给大家！！！