Reactjs 如何在 React 中使用 debounce hooks

import { useEffect, useState } from 'react';

export default function useDebounce(text: string, delay: number) {
  const [value, setValue] = useState('');

  useEffect(() => {
    const timerId = setTimeout(() => {
      setValue(text);
    }, delay);
    return () => {
      clearTimeout(timerId);
    };
  }, [text, delay]);
  return value;
}

  useEffect(() => {
    const handler = () => {
      if (liRef.current) setWidth(liRef.current.clientWidth);
    };

    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

function saveInput() {
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

<input type="text" onkeyup="processChange()" />

import { debounce } from 'lodash';

const debounceOnChange = debounce(() => {
  console.log("This is a debounce function");
}, 500);

Reactjs相关问答推荐

LocalStore未存储正确的数据

无法覆盖MUI工具栏上的左右填充，除非使用！重要

使用Thattle和Use Effect setTimeout进行搜索有什么不同

获取更改后的状态值

使用experial_useFormState将参数传递给服务器操作

蚂蚁 Select .列表弹出窗口不会'；有时不会出现

MUI 日期 Select 器 - 最小日期混乱

无法在 NextJS 中获取嵌套对象

react 本机屏幕转换

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

ReactJS 中的图像加载顺序

是否可以直接在 jsx 标签上使用 CSS 定义的 colored颜色 ？

如何在Next.js应用程序中为路由[slug]生成.html文件？

如何向 surveyjs 调查添加多个结尾？

我刚刚部署了我的 Vite React 站点，但我的图标/图像没有部署

如何禁用来自 React Native API 的某些特定项目的可touch 不透明度

将路径数组传递给Route会引发错误

使用输入类型文本对 useState 和日期做出react

react-query、react-hook-form 和表单验证

如何通过 Material Ui 设计将 Accordion 添加到您的 React 项目中？