防抖和节流
防抖原理:多次触发同一事件,每次只执行最后一次,即每次执行前都清除之前的定时器。
节流原理:多次触发同一事件,每间隔一段时间执行一次,执行完当前事件才会再次执行。
//防抖:多次点击只执行最后一次
var time;
var fn1 = function(){
console.log('防抖');
console.log(time);
if(time){//不为空就清除当前定时器
console.log(time);
clearTimeout(time);
}
time = setTimeout(() => {
console.log('哈哈哈哈');
}, 1000);
}
//节流,多次点击,间隔一段时间执行一次
var time;
var fn2 = function(){
console.log('节流');
if(!time){//当前不存在定时器,添加一个
time = setTimeout(() => {
console.log('嘻嘻嘻');
time = null;//执行完同时置空,确保之后仍触发判断条件
}, 1000);
}
}
}