防抖和節流：均是減少某一函數頻繁執行消耗內存和資源的情況(減少執行次數)。
防抖：規定在多久時間內沒有動作觸發函數才執行該函數。
場景舉例：用戶滾輪滑動顯示距離頁頂的高度。
//顯示頁頂高度
function showTop(){
console.log(document.body.scrollTop||document.documentElement.scrollTop)
time = null;
}
//防抖函數
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.節流：類型于技能冷卻，觸發后一定時間不再觸發
function showTop(){
console.log(document.body.scrollTop||document.documentElement.scrollTop;);
}
window.onscroll =lessRender();
function lessRender(){
//定義一個冷卻,初始未冷卻：false
var lique =false;
return function(){
//查詢當前狀態
if(lique){
return;~~~~
}else{
show();
lique = true;
//重新進入冷卻,2s后可以再觸發
setTimeout(()=>{lique=false},2000)
}
}
}
|
QQ好友和群
QQ空間
騰訊微博
騰訊朋友
收藏
淘帖
頂
踩
