防抖
以浏览器百度输入为例,短时间内连续输入多个字,输入框下方文字提示会等到最后一个字输入结束后再做联想
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
function debounce(fn,delay){
let timer = null //借助闭包
return function() {
if(timer){
clearTimeout(timer) //进入该分支语句,说明当前正在一个计时过程中,并且又触发了相同事件。所以要取消当前的计时,重新开始计时
timer = setTimeout(fn,delay)
}else{
timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时,那么就开始一个计时
}
}
}
节流
以点击按钮请求数据为例,短时间内多次点击按钮,只需要执行一次请求数据操作
let timer = 0;
function () {
if(!timer){
timer=setTimeout(()=>{
if(!immediate){
fn.apply(context,args);
}
clearTimeout(timer);
timer=null;
},wait);
}
}