1.防抖、节流
防抖:事件触发ns后执行。如果在这一段时间时间内重复操作会重新计时。
应用场景:监听用户输入,在用户停止输入后的一段时间触发
防抖分为立即执行和非立即执行
非立即执行
function debounce(fn,delayTime){
let timer = null;
return function(){
let that = this;
let args = arguments;
timer && clearTimeout(timer);
timer = setTimeout(function(){
fn.apply(that,args);
},delayTime);
}
}立即执行
function debounce(fn,delayTime){
let timer = null;
return function(){
let that = this;
let args = arguments;
timer && clearTimeout(timer);
let flag = !timer;
timer = setTimeout(function(){
timer = null; },delayTime);
flag && fn.apply(that,args);
}
}节流:一个固定单位之间内只能触发一次。如果触发多次只有一次生效
应用场景:监听滚动条、鼠标事件,为节约性能,减少频繁触发
时间戳
function tottled(fn,delayTime){
let start = Date.now();
return function(){
let that = this;
let args = arguments;
let now = Date.now();
if(now-start > delayTime){
fn.apply(that,args);
start = Data.now();
}
}
}定时器
function tottled(fn,delayTime){
let timer = null;
return function(){
let that = this;
let args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(that,args);
timer = null;
},delayTime);
}
}
}