防抖:在响应时间内,重复点击后,响应时间开始重新计时
应用场景:搜索框中输入完两秒之后,开始搜索
//在响应时间之后执行,延迟执行
//func响应时间之后执行的方法,wait响应时长
function debounce(func,wait){
let timeout;//定时器
return function(){
//如果定时器存在则清除定时器
if(timeout) clearTimeout(timeout);
timeout=setTimeout(function(){
func.apply(this,arg);
},wait);
}
}
//这里debounce只执行了一次
element.event=debounce(function1,time);
//立即执行一次,再进行防抖
//思路:加入一个布尔值,用来判断是否是第一次执行
function debounce2(func,wait){
let timeout;
return function(){
let firstCall;
if(timeout) firstCall=!timeout;clearTimeout(timeout);
//开启一个定时器,假设 wait=2000 ;定时器跑完2秒之后才将timeout赋值null,也就是说,如果没跑完两秒,timeout一直不为空,那么firstCall一直为false,也就不会执行func函数
timeout=setTimeout(function(){
timeout=null;
},wait);
if(firstCall) func.apply(this,arg);
}
}
//这里debounce2只执行了一次
element.event=debounce2(function2,time);
节流:连续发生的事件,在一定时间内只执行一次
应用场景:防止用户连续点击
function throttle(func,wait){
let timeout;
return function(){
if(!timeout){
timeout=setTimeout(function(){
timeout=null;
func.apply(this,arg);
},wait)
}
}
}
//这里throttle只执行了一次
element.event=throttle(function1,time);
//用时间相减的方式
function throttle2(func,wait){
let prev=0;
return function(){
let now=Data.now();
if(now-prev>=wait){
func.apply(this,arg);
prev=now;
}
}
}
//这里throttle2只执行了一次
element.event=throttle2(function2,time);
注意:let prev=0;
是动态的,因为函数只返回了return
后面的匿名函数函数,let prev=0;
只是充当的初始值