防止由于搜索栏上的取消抖动而导致延迟

Question

我有一个搜索栏，在其中获取键入的文本并进行API调用。为了限制API调用的数量，我使用了去抖动。我想在搜索栏中键入内容的那一刻向加载程序显示，但由于取消抖动，该操作也被延迟。我试图在下面的代码中复制行为-

import React, { useState } from "react";
import "./style.css";
import { debounce } from "lodash";
export default function App() {
const [loading, setLoading] = useState(false);
const callAPI = () => {
setLoading(true);

// Post this will be the logic to call API
console.log('API is called')
};
const inputChangeHandler = event => {
const text = event.target.value;
if (text.length === 0) {
setLoading(false);
} else {
callAPI();
}
};
const debouncedChangeHandler = debounce(inputChangeHandler, 1000);
return (
<div>
<input type="text" onChange={debouncedChangeHandler} />
{loading && <p>Loading...</p>}
</div>
);
}

这是链接

我想在搜索栏中输入内容时向加载程序显示，但我也想取消调用API调用。

Answer 1

创建去抖动函数时使用{ leading: true }选项：

const debouncedChangeHandler = debounce(inputChangeHandler, 1000, { leading: true });

这将导致第一次调用(前沿立即调用函数，并取消其余调用。

示例：

const { useState } = React;
const { debounce } = _;
function App() {
const [loading, setLoading] = useState(false);
const callAPI = () => {
setLoading(true);
// Post this will be the logic to call API
console.log("API is called");
};
const inputChangeHandler = event => {
const text = event.target.value;
if (text.length === 0) {
setLoading(false);
} else {
callAPI();
}
};

const debouncedChangeHandler = debounce(inputChangeHandler, 1000, { leading: true });
return (
<div>
<input type="text" onChange={debouncedChangeHandler} />
{loading && <p>Loading...</p>}
</div>
);
}
ReactDOM.render(
<App />,
root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>

或者，您可以仅解除对callAPI函数的抖动：

const { useState } = React;
const { debounce } = _;
function App() {
const [loading, setLoading] = useState(false);
const callAPI = () => {
// Post this will be the logic to call API
console.log("API is called");
};

const debouncedCallAPI = debounce(callAPI, 1000);

const inputChangeHandler = event => {
const text = event.target.value;
if (text.length === 0) {
setLoading(false);
} else {
setLoading(true);
debouncedCallAPI();
}
};

return (
<div>
<input type="text" onChange={inputChangeHandler} />
{loading && <p>Loading...</p>}
</div>
);
}
ReactDOM.render(
<App />,
root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous"></script>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>