防抖函数 要求:
当持续触发事件,一定时间内没有再触发事件,事件处理函数才会再执行一次*
当设定的事件来到之前,有一次触发了事件,就重新开始延时
代码的详细讲解
// 防抖函数 要求
// 当持续触发事件,一定时间内没有再触发事件,事件处理函数才会再执行一次
// 当设定的事件来到之前,有一次触发了事件,就重新开始延时
var input = document.querySelector('#input')
// 防抖函数
function debounce(delay) {
// 让timer一直存储在内存中
let timer
return function (value) {
//我们要想清除这个timer,就必须让他一直保存在内存中,
// 如果不想打印之前的结果,就必须清除以前触发的定时器
clearTimeout(timer)
timer = setTimeout(() => {
console.log(value);
}, delay)
}
}
// 这里是先调用外层函数,传入1000的时间值
var debouncefunc = debounce(1000)
// 在键盘抬起的时候,一秒之后打印出结果,但是如果我再次输入,那么就清除上一步 ,只打印这一步的结果
input.addEventListener('keyup', (e) => {
// 现在的debouncefunc就相当于 return的内部函数
// 这个时候传入value的值再打印
// 当我们输入了下一次的值的时候,就是再次调用这个内层函数的时候
debouncefunc(e.target.value)
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>防抖函数</title>
</head>
<body>
<input type="text" id="input">
<script>
// 防抖函数 要求
// 当持续触发事件,一定时间内没有再触发事件,事件处理函数才会再执行一次
// 当设定的事件来到之前,有一次触发了事件,就重新开始延时
var input = document.querySelector('#input')
// 防抖函数
function debounce(delay) {
// 让timer一直存储在内存中
let timer
return function (value) {
//我们要想清除这个timer,就必须让他一直保存在内存中,
// 如果不想打印之前的结果,就必须清除以前触发的定时器
clearTimeout(timer)
timer = setTimeout(() => {
console.log(value);
}, delay)
}
}
// 在键盘抬起的时候,一秒之后打印出结果,但是如果我再次输入,那么就清除上一步 ,只打印这一步的结果
// 这里是先调用外层函数,传入1000的时间值
var debouncefunc = debounce(1000)
input.addEventListener('keyup', (e) => {
// 现在的debouncefunc就相当于 return的内部函数
// 这个时候传入value的值再打印
// 当我们输入了下一次的值的时候,就是再次调用这个内层函数的时候
debouncefunc(e.target.value)
})
</script>
</body>
</html>