1.什么是防抖？防抖有什么作用？
带着这个问题，开始本篇讲述，一开始听防抖我也是蒙蒙的，今天又遇到了，记录一下。加深印象。
防抖就是当持续触发事件时，在一定时间内如果没有触发该事件，事件处理函数会执行一次，当在一定时间内触发该事件时，会清除定时器，只在最后执行一次。
这里有清除定时器，所以，防抖函数里需要使用定时器。
我们以输入框中输入内容为例，1s时间内在文本框中输入内容，如果1s内多次按下键盘按键，就清除定时器。直到1s时间到了之后输出最后结果。通俗讲，就是无论1s内按了多少次按键，都不会触发，只有到了1s之后，才会触发事件处理函数。
2.输入框案例实现防抖操作
<body>
<input type="text" class="input">
<script>
//1.首先获取元素
var ipt=document.querySelector('.ipt');
//2.在这里定义一个防抖函数
function debounce(delay,value){
setTimeout(function(){
console.log(value)
},delay)
}
//3.给ipt添加键盘弹起事件
ipt.addEventListener('keyup',function(e){
debounce(1000,e.target.value);
})
</script>
</body>上述代码虽然写了防抖函数，里面设置了定时器，但是并没有清除定时器的功能，所以这样简单的实现是有问题的，键盘按一下，每隔1s就会打印一次，添加清除定时器的功能可以想到下面的代码
<body>
<input type="text" class="input">
<script>
//1.首先获取元素
var ipt=document.querySelector('.ipt');
//2.在这里定义一个防抖函数
function debounce(delay,value){
let timer=null;
clearTimeout(timer);
timer=setTimeout(function(){
console.log(value)
},delay)
}
//3.给ipt添加键盘弹起事件
ipt.addEventListener('keyup',function(e){
debounce(1000,e.target.value);
})
</script>
</body>上述定义的清除定时器也是有问题的，能想到试问什么吗？哈哈哈，原因就是防抖函数里面虽然定义了定时器的名称，并且添加了清除定时器的功能，但是一开始定义的timer为null,这样clrearTimeout()就会失效，因为它清除的是null，这里我们就会想到，什么会实现内存一直保存，不会被清除呢？当然是闭包喽，闭包就是在函数中return 函数，实现清除定时器的功能。
修改后的代码
<body>
<input type="text" class="input">
<script>
//1.首先获取元素
var ipt=document.querySelector('.ipt');
//2.在这里定义一个防抖函数
function debounce(delay){
let timer=null;
return function(value){
clearTimeout(timer);
timer=setTimeout(function(){
console.log(value)
},delay)
}
}
var debounceFunc=debounce(1000);
//3.给ipt添加键盘弹起事件
ipt.addEventListener('keyup',function(e){
debounceFunc(e.target.value);
})
</script>
</body>上述代码虽然实现了防抖操作，但是不具有普遍性，为了在所有的地方都能应用防抖，将其封装成一个通用函数。具体实现代码如下：
<body>
<input type="text" class="input">
<script>
//1.首先获取元素
var ipt=document.querySelector('.ipt');
//2.在这里定义一个防抖函数
function debounce(delay,callback){
let timer=null;
return function(value){
clearTimeout(timer);
timer=setTimeout(function(){
callback(value);
},delay)
}
}
function fn(value){
console.log(value);
}
var debounceFunc=debounce(1000,fn);
//3.给ipt添加键盘弹起事件
ipt.addEventListener('keyup',function(e){
debounceFunc(e.target.value);
})
</script>
</body>上述就是防抖的实现过程。是不是很清晰，通俗易懂。