持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第19天，点击查看活动详情
软件开发中有一些繁重的任务。以调用 API 为例。假设我们有一个搜索用户列表的 API，而且我们不能经常触发它。我们只想在输入了整个搜索查询后才进行搜索。
好吧，去抖动是软件开发中的一种实践，它可以确保像上面那样的某些繁重的任务不会经常被解雇。
何时使用去抖动
让我们通过一个例子来理解这一点。假设我们有一个输入元素，当我们键入内容时它会获取一些数据。例如，假设我们输入任何密码，它会返回一些数据。
但这里有一个问题。假设我们的密码是 800001。如果我们输入第一个字符，即 8，我们将向后端服务器发送请求。然后我们输入 0，我们将向服务器发送另一个请求，依此类推。
这会多次调用 API，进而过度使用请求。因此，为了防止这种情况，我们使用了一种叫做 debounce 功能的东西。
因此，为了实现这一点，我们在 JavaScript 中有一个名为 Debouncing 的功能。
JavaScript 中的去抖动——一个实际的例子
在下面的示例中，当我们在输入框中键入任何数字字符时，我们只是使用axios.get方法调用 API。
输入字符作为参数传递给函数，我们将值作为路径参数传递。我们还在控制台中记录响应。
import axios from "axios";
import React from "react";
import "./styles.css";
export default function App() {
const setInput = (value) => {
axios
.get(`https://api.postalpincode.in/pincode/${value}`)
.then((response) => {
console.log(response.data[0]?.PostOffice[0]);
});
};
return (
<div className="app">
<input
placeholder="Search Input.."
onChange={(e) => setInput(e.target.value)}
/>
</div>
);
}
但这里的问题是，每次我们编写一个字符时，我们的 API 都会被触发。回到我们上面的例子，假设我们要输入 800001。同样，只要我们输入 8，API 就会被触发，它会搜索字符 8。然后我们输入 0（零），然后 API将搜索 80，依此类推。
现在，让我们更改整个流程以添加去抖动功能。在 Debouncing 的情况下，API 只会在 2 秒后触发一次，在我们输入整个密码之后。
首先，使用 React 中的useState钩子创建一个状态。
const [pinCode, setPinCode] = React.useState("");
现在，我们需要在输入内容时使用onChange事件处理程序将数据设置为pinCode状态。****
<input
placeholder="Search Input.."
onChange={(event) => setPinCode(event.target.value)}
/>
现在，让我们有一个useEffect Hook，它会在每次我们的 pin 码更改或我们在搜索输入中键入内容时运行。
React.useEffect(() => {
}, [pinCode])
在这个 useEffect Hook 中，我们将有一个名为getData的函数。此函数 getData 将有一个名为setTimeOut的回调函数。我们将定时器设置为 2 秒。
React.useEffect(() => {
const getData = setTimeout(() => {
}, 2000)
}, [pinCode])
现在在这个getData函数中，让我们调用我们的 API。
React.useEffect(() => {
const getData = setTimeout(() => {
axios
.get(`https://api.postalpincode.in/pincode/${pinCode}`)
.then((response) => {
console.log(response.data[0]);
});
}, 2000)
}, [pinCode])
我们还需要使用return销毁 useEffect 钩子的实例，然后使用clearTimeout，每次它完成。********
React.useEffect(() => {
const getData = setTimeout(() => {
axios
.get(`https://api.postalpincode.in/pincode/${pinCode}`)
.then((response) => {
console.log(response.data[0]);
});
}, 2000)
return () => clearTimeout(getData)
}, [pinCode])
我们完成了。让我们在输入中输入一些内容，2 秒后我们将得到结果。
你有它！
结论
现在你知道如何以及为什么要使用 debounce ****功能了。这么简单和容易吗？
现在，如果我们在输入中键入任何搜索查询，它将在我们停止更改输入时的 2 秒后显示。我们使用去抖动来做到这一点。
