防抖通俗来说就是当你的操作停止一定时间后，相应的函数才会开始执行。
<body>
<input type="text" />
<script>
function debounce(fn,time) {
return function () {
let timeout;
clearTimeout(timeout);
timeout = setTimeout(() => {
fn();
}, time);
};
}
function sayHi() {
console.log("防抖成功");
}
var input = document.querySelector("input");
input.addEventListener("input", debounce(sayHi,500));
</script>
</body>
解析
<body>
<!-- 输入框 -->
<input type="text" />
<script>
// 防抖函数
// fn指的是要调用的函数 time指停止操作的时间
function debounce(fn, time) {
return function () {
// 定义timeout存储时间
let timeout;
// 如果操作继续那就清除时间
clearTimeout(timeout);
// 设置定时函数，当停止操作一段时间后，调用函数
timeout = setTimeout(() => {
// 调用的函数
fn();
}, time);
};
}
// 设置一个输出函数方便看效果
function sayHi() {
console.log("防抖成功");
}
// 绑定标签
var input = document.querySelector("input");
// 调用防抖
input.addEventListener("input", debounce(sayHi, 500));
</script>
</body>
参考文献：
