防抖（Debouncing）：
防抖（Debouncing）这种编程技术，主要用于优化在短时间内被频繁触发的事件处理函数的执行频率。核心思想即：对于一系列连续发生的事件，在最后一次事件发生后 n 秒内没有新的事件发生时，才执行对应的处理函数。如果在 n 秒内再次触发了该事件，则重新计时。就像 MOBA 游戏里面的回城一样，在回城期间再点一次回城（回城就被打断了），我们就要重新等待回城时间后（回城时间被重置了）才能执行完。
假设我们有一串代码用于打印用户输出的结果：
<body>
<div>
<label for="Input">用户输入</label>
<input
type="text"
id="Input"
placeholder="请输入"
>
</div>
<script>
const input = document.querySelector('Input');
input.addEventListener('input', function () {
console.log('用户输入：', input.value);
});
</script>
</body>
而当我们输入一些内容后，会产生以下效果
明明我们只是输入了"西西里"三个字，但是在Console中却打印了许多次，这就表明这个事件执行了许多次。想而知，这是不利于我们项目的性能的，那么我们就需要考虑如何减少与后台数据库请求的次数，而这就是防抖的职责。 为了实现 事件触发过于频繁,只需要用户最后一次请求 这个功能的技术就叫做 防抖
防抖的工作原理 + 使用场景：
实现步骤图：
- 首次调用：当事件首次被触发时，设置一个定时器。
- 后续调用：每当事件再次被触发时，清除之前的定时器并重新设置一个新的定时器。
- 延迟执行：只有当设定的时间间隔内不再有新的事件触发时，才会执行实际的处理函数。
使用场景
- 输入框搜索建议：用户快速打字时，我们不需要对每次按键都发送请求去获取搜索建议，而是等待用户停止打字一段时间后再发起请求。
- 窗口大小调整：当用户调整浏览器窗口大小时，避免过于频繁地重绘页面或计算布局。
- 滚动事件：如无限滚动加载更多内容，减少不必要的API调用。
代码示例：
下面是为上述代码添加防抖函数：
<body>
<div>
<label for="Input">用户输入</label>
<input
type="text"
id="Input"
placeholder="请输入"
>
</div>
<script>
const input = document.querySelector('Input');
input.addEventListener('input', debounce(function () {
// 用debounce函数去约束input事件,但是实际执行的函数是function函数,防抖延迟设置的是1000ms
console.log('用户输入：', input.value);
}, 1000));
/*
func：回调函数（真正的功能）
delay：延迟时间
*/x
function debounce(func, delay) {
let timeout; // timeout定时器来控制事件
return function() {
clearTimeout(timeout);
timeout = setTimeout(() => {
func() // 调用真正的功能
}, delay)
}
}
</script>
</body>
实现的效果如图
总结：
防抖（Debouncing）是一种优化技术，它确保函数只在最后一次事件触发后的短暂宁静期执行，从而避免了不必要的重复操作。使用防抖，不仅能让代码更加高效，还能让用户界面响应更流畅。试试为你的项目加入防抖吧，让你的应用也能学会适时休息，保持最佳状态！ 😄
---欢迎各位点赞、收藏、关注，如果觉得有收获或者需要改进的地方，希望评论在下方，不定期更新
