JS:防抖和節流

防抖和節流:

均是減小某一函數頻繁執行消耗內存和資源的狀況(減小執行次數)。

防抖:規定在多久時間內沒有動做觸發函數才執行該函數。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)
     }
   }
 }
相關文章
相關標籤/搜索