JavaScript防抖
防抖
为什么需要防抖
如同感应门,没有人需要进入的时候关闭,有人需要进入的时候自动打开。每一个人靠近的时候,触发一次门打开,进入之后关闭,在关闭的时候有人靠近又会打开,因为在一段时间之内有很多人会进出,频繁的开关会夹到人,所以为了安全和方便,需要将很多的触发归为一次触发,在一段时间内持续触发就会,开,过了一段时间没人触发,就关。
防抖是指触发事件后n秒才执行函数,如果在n秒内又触发事件了,则会重新计算函数时间
多次的请求可能会造成网络的阻塞。
防抖应用在前端的场景
防止用户频繁相同的操作
- 改变页面的大小
- 滚动页面位置的统计
- 输入框连续输入请求的次数控制
- 防止表单多次提交
防抖设计步骤
点击->清除延时->设置定时
若在规定的时间内又有操作,再次清除延时,再次定时
若在规定的时间内没有操作,执行函数
防抖代码
function payMoney(){
console.log("已剁")
}
function debounce(func,delay){
// 这里用了闭包
let timer;
return function (){
let context = this;
let args = arguments
clearTimeout(timer)
timer = setTimeout(function (){
func.apply(context,arguments)
},delay)
}
}
button.addEventListener('click',debounce(payMoney,1000))