防抖:事件触发后,函数在n秒内只执行一次,若n秒内再次触发事件,则重新计算
节流:连续事件在n秒内触发,函数只执行一次
防抖:
//延迟执行
//如输入两秒后才开始查询
function debounce(func,wait){
let timeout; //定时器
return function(){
if(timeout) clearTimeout(timeout); //取消之前的任务
timeout=setTimeout(function(){
func.apply(this,arguments); //执行func函数
},wait)
}
}
//立即执行
//如输入后立即查询,两秒后才能再次查询
function debounce(func,wait){
let timeout; //定时器
return function(){
if(timeout) clearTimeout(timeout); //取消之前的任务
let callNow=!timeout; //类型转换 第一次timeout为undefined,callNow为true
timeout=setTimeout(()=>{ //增加一个定时器
timeout=null; //清空当前计时器句柄
},wait);
if(callNow) func.apply(this); //第一次就执行
}
}
节流:
//节流 定时器
function throttle(func,wait){
let timeout;
return function(){
if(!timeout){ //是否存在定时器
setTimeout(()=>{ //创建一个定时器
timeout=null;
func.apply(this);
},wait)
}
}
}
setTimeout函数性能耗费较高,不适合用于移动端等。可通过时间戳实现节流。
//时间戳
function throttle(func,wait){
let prev=0; //上次记录的时间 初始值
return function(){
let now=new Date(); //当前时间
if(now-prev>wait){ //当前时间-上次时间>等待时间
func.apply(this); //执行函数,发送请求
prev=now; //重置上次记录时间
}
}
}