在软件开发中，有一些繁重的任务。以调用API为例。假设我们有一个搜索用户列表的API，我们不能太频繁地启动它。我们希望只有当我们输入了整个搜索查询时才进行搜索。
那么，debouncing是软件开发中的一种做法，它可以确保某些像上述那样的繁重任务不会被频繁地启动。
何时使用跳转
让我们通过一个例子来理解这个问题。假设我们有一个输入元素，当我们输入一些东西时，它会得到一些数据。例如，假设我们输入了任何针号，它就会返回一些数据。
但这里有一个问题。比方说，我们的密码是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将在我们输入整个pin-code后的2秒后才触发一次。
首先，使用React的useState钩子创建一个状态。
const [pinCode, setPinCode] = React.useState("");
现在，我们需要使用onChange 事件处理程序，在我们输入东西时设置pinCode 状态的数据。
<input
placeholder="Search Input.."
onChange={(event) => setPinCode(event.target.value)}
/>
现在，让我们有一个useEffect Hook，它将在每次我们的pin-code改变时，或在搜索输入中输入一些东西时运行。
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秒后显示。而我们使用了debouncing来做到这一点。
脱跳有多种应用。我们可以用它来避免反复冲击我们的API。我们还可以用它来确保表单数据只被提交一次，即使我们多次点击提交按钮。
你也可以看看我在Youtube上的视频：React Debounce Function in 100 Seconds - Delay a function in React。
在这里获得代码。
学习愉快。
