什么是防抖？
概念：防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。
例子：我们坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件），那么电梯就会再多等待 10 秒。在上述例子中，电梯在检测到有人进入 10 秒钟之后，才会关闭电梯门开始运行，因此，“函数防抖”的关键在于，在 一个事件 发生 一定时间 之后，才执行 特定动作。
使用场景
- 按钮连续点击，造成连续发送了多次请求；
- 我们在调整浏览器窗口的时候，不停的拖拉窗口，resize次数过于频繁，造成计算次数过多，这时候就需要一步到位，等到我们不再改变窗口了再去计算；
- 我们在搜索框中输入的时候，并不需要我们每次输一个字就去进行搜索，只需要我们不再输入的时候才去进行搜索，返回我们需要搜索的结果。
- ............................等
如何利用防抖解决上述问题？
防抖的关键是借助setTimeout来实现，在一定时间间隔后执行后续操作，如果遇到多次触发，则清空计时器，重新开始计时，若在计时时间内没有再次触发，则等到计时结束执行后续操作。
代码如何实现呢？
<!-- 使用场景
1、按钮连续点击，以致于发送了多次请求
2、调整浏览器窗口大小，resize次数过于频繁，造成计算次数过多，此时需要一步到位，就需要用到防抖
3、搜索框搜索输入，不需要每次输入一个字的时候就进行搜索，而且等待没有再次输入的时候就返回结果
-->
<input type="text" value="123">
<button id="btn">点击提交</button>
<script>
// 防止按钮连续点击
let btn = document.querySelector('#btn');
let ipt = document.querySelector("input");
const debounce = (() => { // 自调用
let timer = null; // 接收定时器
return (callback,time = 800) => {
timer && clearTimeout(timer) // 有定时器，先清除
timer = setTimeout(callback,time);
}
})();
btn.addEventListener("click", function () {
// 防抖原理：借助setTimeout在一定的时间间隔内，将多次处罚变为一次触发
debounce(()=> {
// 发送请求
console.log("请求登录")
console.log(ipt.value)
}, 2000);
})
</script>
