76 lines
1.7 KiB
JavaScript
76 lines
1.7 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { API_CONFIG } from '../config/api';
|
|
|
|
/**
|
|
* 防抖 Hook
|
|
* @param {any} value - 需要防抖的值
|
|
* @param {number} delay - 延迟时间（毫秒）
|
|
* @returns {any} 防抖后的值
|
|
*
|
|
* @example
|
|
* const [keyword, setKeyword] = useState('');
|
|
* const debouncedKeyword = useDebounce(keyword, 300);
|
|
*
|
|
* useEffect(() => {
|
|
* // 只有在停止输入 300ms 后才会执行
|
|
* fetchData(debouncedKeyword);
|
|
* }, [debouncedKeyword]);
|
|
*/
|
|
export function useDebounce(value, delay = API_CONFIG.debounceDelay) {
|
|
const [debouncedValue, setDebouncedValue] = useState(value);
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setDebouncedValue(value);
|
|
}, delay);
|
|
|
|
return () => {
|
|
clearTimeout(timer);
|
|
};
|
|
}, [value, delay]);
|
|
|
|
return debouncedValue;
|
|
}
|
|
|
|
/**
|
|
* 防抖函数 Hook（用于回调函数）
|
|
* @param {Function} callback - 需要防抖的回调函数
|
|
* @param {number} delay - 延迟时间（毫秒）
|
|
* @returns {Function} 防抖后的函数
|
|
*
|
|
* @example
|
|
* const debouncedSearch = useDebouncedCallback((value) => {
|
|
* fetchData(value);
|
|
* }, 300);
|
|
*
|
|
* <Input onChange={e => debouncedSearch(e.target.value)} />
|
|
*/
|
|
export function useDebouncedCallback(callback, delay = API_CONFIG.debounceDelay) {
|
|
const [timeoutId, setTimeoutId] = useState(null);
|
|
|
|
const debouncedFn = (...args) => {
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
}
|
|
|
|
const newTimeoutId = setTimeout(() => {
|
|
callback(...args);
|
|
}, delay);
|
|
|
|
setTimeoutId(newTimeoutId);
|
|
};
|
|
|
|
// 清理函数
|
|
useEffect(() => {
|
|
return () => {
|
|
if (timeoutId) {
|
|
clearTimeout(timeoutId);
|
|
}
|
|
};
|
|
}, [timeoutId]);
|
|
|
|
return debouncedFn;
|
|
}
|
|
|
|
export default useDebounce;
|