防抖和节流
防抖和节流都是为了防止在短时间内高频率调用同一接口
防抖:
设置延时器,短时间内高频率的触发 ,只执行最后一次。
思路:点击按钮后设置一个定时器,间隔2s再发送请求,如果 2s内多次请求,则清除定时器,2s后重新发送请求。也就是说,在2s内无论点击提交多少次,最后一次总是会清除上一次的延迟,继而进行自身请求。
var btn=document.getElementById('btn')
var timer
btn.onclick=function(){
clearTimeout(timer)
// console.log('点击了');
timer= setTimeout(function(){
console.log('点击了');
},2000)
}
节流:
设置状态锁,短时间内高频率的触发,只执行第一次。
思路:设置一个key作为状态锁,锁一开始是关闭的,即key值设置为false。当你点击时,会对key进行判断,如果key为false,未上锁,那么开始发起请求,并且给key上锁,即设置key为true。如果你继续点击,则对key进行判断,发现key上锁了,则不发起请求,点击无效。当请求完成后,key设置为false,则可以发送新一轮请求了。
var btn=document.getElementById('btn')
var key=false
btn.onclick=function(){
// console.log('点击了');
if(!key){
console.log('点击了');
key=true
//请求完成后恢复可以点击状态
setTimeout(function(){
key=false
},2000)
}
}