js实现防抖函数,输入框持续输入打印最终的值
防抖是闭包的实际应用之一
一、防抖函数：
**概念：**当高频事件持续触发时，只有当一定时间内没有再次触发事件，事件才会执行一次,
若一定时间内再次触发事件，则重新计时。
比较类似lol中回城被打断后，再次回城需要重新读秒
二、实现代码：
<body>
<input type="text" id="input">
<script>
// 输入框一直输入，停止输入后1秒后，才打印输出最终的值
let debounceFunc = debounce(1000)
let input = document.getElementById('input')
input.addEventListener('keyup',function (e) {
debounceFunc(e.target.value,fn)//重复调用了返回的回调函数
})
/**
* 防抖函数
* @param delay 延时时间
* @param value 传入值
*/
function debounce(delay) {
let timer
return (value,callback)=>{
clearTimeout(timer)
// 需要清除的timer，利用闭包将timer一直保存在内存之中
timer = setTimeout(()=>{
// console.log(value) // 若结果不再此处输出
callback(value);
},delay)
}
}
//回调函数
function fn(value) {
console.log('callback',value)
}
//防抖函数实际应用：
//1、使用echarts时，改变浏览器宽度，希望重新渲染
//2、搜索时输入真正结束n秒后,才发送搜索请求
</script>
