什么是防抖
防抖: n 秒后再去执行该事件，若在 n 秒内被重复触发，则重新计时，这个效果跟英雄联盟里的回城技能差不多。
本质上是优化高频率执行代码的一种手段，目的就是降低回调执行频率、节省计算资源。
应用场景：
- 搜索框搜索输入，手机号、邮箱等验证输入检测，只需用户最后一次输入完，再发送请求
- 窗口大小 resize，只需窗口调整完成后，计算窗口大小，防止重复渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>防抖</title>
<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
<div>
普通输入框：
<input class="input1" />
</div>
<div>
防抖输入框：
<input class="input2" />
</div>
<script>
// 普通
const inputEl1 = document.querySelector(".input1");
let counter1 = 1;
inputEl1.oninput = function () {
console.log(`发送网络请求${
counter1++}`, this.value);
};
// 防抖处理过的
const inputEl2 = document.querySelector(".input2");
let counter2 = 1;
inputEl2.oninput = _.debounce(function () {
console.log(`防抖处理：发送网络请求${
counter2++}`, this.value);
}, 1000);
</script>
</body>
</html>
手写 debounce
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>手写防抖</title>
<script>
function kaimoDebounce(fn, delay) {
let timer = null;
let _debounce = function (...args) {
// 清除上一次定时器
clearTimeout(timer);
// 开启新的一个定时器
timer = setTimeout(() => {
// this 和参数绑定
fn.apply(this, args);
// 函数执行完之后，将timer置为null
timer = null;
}, delay);
};
return _debounce;
}
</script>
</head>
<body>
<div>
防抖输入框：
<input class="input" />
</div>
<script>
const inputEl = document.querySelector(".input");
let counter = 1;
inputEl.oninput = kaimoDebounce(function (e) {
console.log(`手写防抖：发送网络请求${
counter++}`, this, this.value);
console.log(e);
}, 1000);
</script>
</body>
</html>
