可以使用防抖或节流的方式来控制API请求。例如,在React中可以通过使用useCallback和useEffect来实现防抖和节流。
防抖示例:
import { useState, useEffect, useCallback } from 'react';
const debounce = (fn, delay) => {
let timeoutId;
return function (...args) {
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
fn.apply(this, args);
timeoutId = null;
}, delay);
};
};
function App() {
const [data, setData] = useState(null);
const debounceFetchData = useCallback(debounce(() => {
// 发送 API 请求的代码
}, 1000), []);
useEffect(() => {
debounceFetchData();
}, [debounceFetchData]);
// 剩下的组件代码
}
节流示例:
import { useState, useEffect, useCallback } from 'react';
const throttle = (fn, delay) => {
let lastTime = 0;
return function (...args) {
const currentTime = Date.now();
if (currentTime - lastTime > delay) {
fn.apply(this, args);
lastTime = currentTime;
}
};
};
function App() {
const [data, setData] = useState(null);
const throttleFetchData = useCallback(throttle(() => {
// 发送 API 请求的代码
}, 1000), []);
useEffect(() => {
throttleFetchData();
}, [throttleFetchData]);
// 剩下的组件代码
}