一、防抖
防抖：適用于 輸入框 輸入內(nèi)容進(jìn)行搜索(解決短時(shí)間內(nèi)高頻觸發(fā)某事件導(dǎo)致響應(yīng)速度跟不上頻率) 等
- 簡單粗暴
public searchTimer=null;
searchChange(data){
if(!data) return;
clearTimeout(this.searchTimer); //區(qū)別節(jié)流
this.searchTimer=setTimeout(()=>{
//做的事情
},300)
}
- 封裝優(yōu)化
//防抖封裝
function debounce(fun,wait){
let timer=null;
return function(arg){
if(timer) clearTimeout(timer); //區(qū)別節(jié)流
timer=setTimeout(_=>{
fun.call(this,arg)
},wait)
}
};
//方法定義
let bb=debounce(function(da){
//方法的其他操作
},500);
//頻繁的方法調(diào)用
document.querySelector("#btn").addEventListener("click", function(){
bb('dasdd');
});
二摇锋、節(jié)流
節(jié)流：適用于 滾動(dòng)條 滾動(dòng)高頻觸發(fā)事件==>會(huì)按照固定頻率(解決短時(shí)間內(nèi)高頻觸發(fā)某事件導(dǎo)致響應(yīng)速度跟不上頻率) 等
- 簡單粗暴
public searchTimer=null;
searchChange(data){
if(!data) return;
if(this.searchTimer) return //區(qū)別防抖
this.searchTimer=setTimeout(()=>{
//做的事情
},300)
}
///直接調(diào)用方法
- 優(yōu)化封裝 延遲調(diào)用
//節(jié)流封裝
function throttle(fun,wait){
let timer=null;
return function(arg){
if(timer) return; //區(qū)別防抖
timer = setTimeout(()=>{
fun.call(this,arg);
timer = null;
},wait);
}
}
- 優(yōu)化封裝 直接就調(diào)用
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)
//頻繁的方法調(diào)用
document.addEventListener("scroll", function(){
cc('dasdd');
});
