函数防抖
在对于函数高频次执行时,只执行一次。
有两种情况:
1.尾部执行:高频次触发时,只执行最后一次
2.头部执行:高频次触发时,只执行第一次
尾部执行实现很简单,先设一个定时器,一开始触发的时候我不执行,稍微延迟一会后再执行,当你下次执行时,我把上一次的定时器消失,这样就只会执行最后一次了。
//防抖尾部执行
let nub = 0;
let timer = 0;
box.onmousemove = function(){
clearTimeout(timer);
timer = setTimeout(()=>{
console.log(1);
},200);
}
头部执行会复杂一些,这里我们多添加一个变量赋值为true,首先先判断这个变量是否为true;true的话就把事件执行了,执行完后把这个变量设为false。然后在定时器结束后,再把变量设为true。
// 防抖头部执行
let nub = 0;
let timer = 0;
let isStart = true;
box.onmousemove = function(){
if(isStart){
console.log(1);
isStart = false;
}
clearTimeout(timer);
timer = setTimeout(()=>{
isStart = true;
},200);
}
函数节流
函数节流,把执行间隔拉大。
与函数防抖一样有头部与尾部执行之分
尾部执行:一样调用定时器,首先判断定时器是否开始,如果开启了就不往下执行,定时器没有开启再往下执行,执行完后,把定时器归回0
// 尾部执行
let timer = 0;
box.onmousemove = function(){
if(timer){
return ;
}
timer = setTimeout(()=>{
console.log(0);
timer = 0;
},1000);
}
头部执行:就是在开启定时器之前执行,定时器决定的是下次再执行的时候。
// 头部执行
let timer = 0;
box.onmousemove = function(){
if(timer){
return ;
}
console.log(0);
timer = setTimeout(()=>{
timer = 0;
},1000);
}