useDebounce#

1import { useState } from 'react';
2import { useDebounce } from '@resin-hooks/core';
3
4function SearchInput() {
5  const [value, setValue] = useState('');
6  const [searchResult, setSearchResult] = useState('');
7
8  const { debounceFn, cancel } = useDebounce(
9    (val: string) => {
10      setSearchResult(val);
11      // 发起搜索请求
12      fetch(`/api/search?q=${val}`).then(/* ... */);
13    },
14    { delay: 500 },
15  );
16
17  return (
18    <div>
19      <input
20        value={value}
21        onChange={(e) => {
22          const val = e.target.value;
23          setValue(val);
24          debounceFn(val);
25        }}
26      />
27      <p>搜索结果: {searchResult}</p>
28      <button onClick={cancel}>取消未执行</button>
29    </div>
30  );
31}

1// immediate: true - 首次调用立即执行，后续在延迟内调用会重置定时器，停止调用 delay 毫秒后再执行
2const { debounceFn } = useDebounce(saveForm, {
3  delay: 300,
4  immediate: true,
5});
6
7// 用户第一次点击保存 → 立即执行
8// 用户连续快速点击 → 只有最后一次在 300ms 后执行

1const { debounceFn } = useDebounce((id: number) => fetchUser(id), {
2  delay: 300,
3  resultCallback: (user) => {
4    console.log('获取到用户:', user);
5  },
6});
7
8debounceFn(1);