函数防抖
何为函数防抖
定义:在事件被触发 n 秒后再执行回调, 如果在这 n 秒内又被触发, 则重新计时;
如何理解这段定义,可以用手机屏幕休眠来理解,若设置休眠时间为一分钟,如果在一分钟之内我们有去操作手机,则重新从一分钟开始计算。
这个过程中,事件可为触摸屏幕,然后事件被触发后的一分钟后屏幕休眠,但是在这一分钟内如果又触摸了屏幕,则会重新从一分钟开始计算。
如何实现函数防抖
应用场景:函数防抖一般应用于搜索框,用函数防抖来实现收集数据发送请求
eg.
let input = document.querySelector('input')
let timeID = null // 设置控制定时器的句柄
input.onkeyup = () => {if (timeID) {clearTimeout(timeID) // 如果有在延迟时间内再次触发,则清除定时器
}
timeID = setTimeout(() => {console.log(input.value,'获取搜索框内容')
}, 200);
}
何为函数节流
定义:指连续触发事件但是在 n 秒中只执行一次函数。
字面意思就是在一段周期内,事件被触发多少次,它所指定的回调函数只执行一次
主要是用来避免一些频繁操作
如何实现函数节流
eg.
let btn = document.querySelector('#btn')
let flag = true
btn.onclick = () => {if (flag) {console.log('发送请求')
flag = false
setTimeout (()=>{flag = true},2000) // 设定周期
}
}