什么是防抖和节流?如何实现防抖和节流?
防抖(Debounce)和节流(Throttle)都是用来控制某个函数在一定时间内触发次数,两者都是为了减少触发频率,以便提高性能或者说避免资源浪费。
防抖
防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
举个例子:
就是你英雄联盟回城需要6秒,如果中间你又按了一次回城,那6秒就得重新计算。
<input @keyup="sends(list)" />
data(){
return {
timeout:null
}
},
methods:{
debounce(fn,item){
//先判断定义的变量是不是没有被赋值定时器,
if(this.timeout !== null) {
//如果被赋值了就清除定时器
clearTimeout(this.timeout)
};
this.timeout = setTimeout(()=>{
fn()
},item)
},
sends(){
//封装里面第一个值接收的是一个函数,所以这里就得传一个函数
this.debounce(()=>{
console.log("防抖被调用了")
},3000)
}
}
节流
节流就是指连续触发事件但是在 n 秒中只执行一次函数。
<input @keyup="sends(list)"/>
data(){
return {
canUse:true
}
methods:{
debounce(fn,item){
//如果为true,就触发技能,否则就不能触发
if(this.canUse){
//触发技能后,关闭开关
fn()
this.canUse = false
//在3秒后打开开关
setTimeout(()=>this.canUse = true, item)
}
},
sends(){
this.debounce(()=>{
console.log(this)
},3000)
}
}