防抖:規定在多久時間內沒有動做觸發函數才執行該函數。less
場景舉例:用戶滾輪滑動顯示距離頁頂的高度。 //顯示頁頂高度 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);
節流:類型於技能冷卻,觸發後必定時間再也不觸發函數
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) } } }