防抖和節(jié)流:均是減少某一函數(shù)頻繁執(zhí)行消耗內(nèi)存和資源的情況(減少執(zhí)行次數(shù))。
防抖:規(guī)定在多久時間內(nèi)沒有動作觸發(fā)函數(shù)才執(zhí)行該函數(shù)。
場景舉例:用戶滾輪滑動顯示距離頁頂?shù)母叨取?br />
//顯示頁頂高度
function showTop(){
console.log(document.body.scrollTop||document.documentElement.scrollTop)
time = null;
}
//防抖函數(shù)
function rejectShook(){
var time = null;
return function(){
if(time==null){
//新建計時器,到時console
time = setTimeout(showTop,200)
}else{
//沒到時間刪除老計時器,新建另一計時器.
clearTimeout(timer);
time =setTimeout(showTop,200)
}
}
}
window.onscroll =rejectShook(showTop);
2.節(jié)流:類型于技能冷卻,觸發(fā)后一定時間不再觸發(fā)
function showTop(){
console.log(document.body.scrollTop||document.documentElement.scrollTop;);
}
window.onscroll =lessRender();
function lessRender(){
//定義一個冷卻,初始未冷卻:false
var lique =false;
return function(){
//查詢當(dāng)前狀態(tài)
if(lique){
return;~~~~
}else{
show();
lique = true;
//重新進入冷卻,2s后可以再觸發(fā)
setTimeout(()=>{lique=false},2000)
}
}
}
|