react实现input搜索框延时发送请求

最新推荐文章于 2024-09-19 11:30:45 发布

劲枫

最新推荐文章于 2024-09-19 11:30:45 发布

阅读量1k

点赞数

文章标签： Debounce react

本文链接：https://blog.csdn.net/TCF_JingFeng/article/details/117484266

版权

const onKeywordsChange = debounce((v: any) => {
  setSalePkgName(v);
  // 800ms之后要执行什么操作在这里写
}, 800);
//防抖函数
function useDebounce(fn: any, delay: any, dep = []) {
  const { current }: any = useRef({ fn, timer: null });
  useEffect(() => {
    current.fn = fn;
  }, [fn]);
  return useCallback(function f(...args) {
    setKeywords(args[0]);  // 这里需要setState一下，不然，得不到value
    if (current.timer) {
      clearTimeout(current.timer);
    }
    current.timer = setTimeout(() => {
      current.fn.call(this, ...args);
    }, delay);
  }, dep);
};