一、防抖
防抖：适用于 输入框 输入内容进行搜索(解决短时间内高频触发某事件导致响应速度跟不上频率) 等
- 简单粗暴
public searchTimer=null;
searchChange(data){
if(!data) return;
clearTimeout(this.searchTimer); //区别节流
this.searchTimer=setTimeout(()=>{
//做的事情
},300)
}
- 封装优化
//防抖封装
function debounce(fun,wait){
let timer=null;
return function(arg){
if(timer) clearTimeout(timer); //区别节流
timer=setTimeout(_=>{
fun.call(this,arg)
},wait)
}
};
//方法定义
let bb=debounce(function(da){
//方法的其他操作
},500);
//频繁的方法调用
document.querySelector("#btn").addEventListener("click", function(){
bb('dasdd');
});
二、节流
节流：适用于 滚动条 滚动高频触发事件==>会按照固定频率(解决短时间内高频触发某事件导致响应速度跟不上频率) 等
- 简单粗暴
public searchTimer=null;
searchChange(data){
if(!data) return;
if(this.searchTimer) return //区别防抖
this.searchTimer=setTimeout(()=>{
//做的事情
},300)
}
///直接调用方法
- 优化封装 延迟调用
//节流封装
function throttle(fun,wait){
let timer=null;
return function(arg){
if(timer) return; //区别防抖
timer = setTimeout(()=>{
fun.call(this,arg);
timer = null;
},wait);
}
}
- 优化封装 直接就调用
function throttle(func,wait){
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
// 方法定义
let cc=throttle(function(ar){
//做的事情
},1000)
//频繁的方法调用
document.addEventListener("scroll", function(){
cc('dasdd');
});
