防抖(debounce)
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
function debounce(fn,wait,immediate){
let timer=null;
return function Fn(){
const context=this;
const args=arguments;
if(timer) clearTimeout(timer);
if(immediate){
let callNow=!timer;
timer=setTimeout(()=>{
timer=null;
},wait)
if(callNow) fn.apply(context,args);
}else{
timer=setTimeout(()=>{
fn.apply(context,args);
},wait);
}
}
}
节流(throttle)
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。
//使用时间戳
function throttle(fn,wait){
let preTime=0;
return function Fn(){
let nowTime=Date.now();
let args=arguments;
let context=this;
if(nowTime-preTime>wait){
Fn.apply(context,args);
preTime=nowTime;
}
}
}
//使用计时器
function throttle(fn,wait){
let timer;
return function(){
const context=this;
const args=arguments;
if(!timer){
timer=setTimeout(()=>{
fn.apply(context,args);
timer=null;
},wait);
}
}
}