JS防抖節流

防抖（debounce） 

定義：  對於短時間內連續觸發的事件（上面的滾動事件），防抖的含義就是讓某個時間期限（如上面的1000毫秒）內，事件處理函數只執行一次。

實際運用：按鈕頻繁點擊，頁面resize。

立即執行版：

function debounce(fn,wait){
  let timeid,flag = true;
  return function(){
    clearTimeout(timeid);
    if(flag){
       fn();
       flag = false;
    }else{
       timeid = setTimeout(function(){
           flag = true;
       },wait);  
    }
 }
}    

非立即執行版:

function debounce(fn,wait){
  let timeid;
  return function(){
    if(timeid){
       clearTimeout(timeid)
    }
    timeid = setTimeout(fn,wait)
  }  
}

 

節流（throttle）

定義：讓事件在一定時間內只執行一次

實際運用：搜索框input事件，例如要支持輸入實時搜索可以使用節流方案。

時間戳版：

function throttle(fn,wait){
  let startTime = 0;
  return function(){
    let endTime = Date.now();
    if(endTime-startTime>wait){
      fn();
      startTime = endTime;
    }
  }
}

定時器版：

function throttle(fn,wait){
  let timeid = null;
  return function(){
    if(!timeid){
       timeid = setTimeout(function(){
         fn();
         timeid = null;
       },wait)
    }
  }
}