10.防抖
1、 定义:
当持续触发时间 一定时间内没有再出发事件 事件处理函数才会执行一次 如果设定的时间到来之前,又一次触发了事件 那么就得重新开始延时
触发事件 一定时间内 没有触发 事件执行 肯定是定时器
在设定的时间内,有一次触发了事件, 重新开始延时,代表的就是重新开始定时器)
意味着 上一次还没有结束的定时器要清除掉,重新开始。
2、 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>防抖函数</title>
</head>
<body>
<input type="test" id="input">
<script type="text/javascript">
var input = document.getElementById('input')
// 防抖函数
// function debounce(delay, value){
// let timer
// clearTimeout(timer)
// // 这里会有问题,因为 timer 是在清除的下边定义的,所以这里的清除 是无法清除掉这个定时器的
// // 所以 timer 变量需要一直保存在内存当中
// // 如何让 变量 timer 一直再内存当中, 内存的泄露 , ===》 闭包
// timer = setTimeout(function (){
// console.log(value);
// }, delay)
// }
// 我需要的是,输入框的结果,只出现一次,并且是在键盘抬起不在输入后的一秒之后再进行输出
function debounce(delay, callback){
let timer
return function (value){
clearTimeout(timer)
// 这里会有问题,因为 timer 是在清除的下边定义的,所以这里的清除 是无法清除掉这个定时器的
// 所以 timer 变量需要一直保存在内存当中
// 如何让 变量 timer 一直再内存当中, 内存的泄露 , ===》 闭包
// 我不想让 输出的函数再我的 定时器里边,我想要在外面输出,需要使用 到callback函数
timer = setTimeout(function (){
callback(value)
}, delay)
}
}
function fn(value){
console.log(value);
}
var debounceFunc = debounce(1000, fn)
// 监听键盘事件
input.addEventListener('keyup', function (e){
debounceFunc(e.target.value)
})
// 闭包 : 函数里边 return 出函数
</script>
</body>
</html>