防抖

效能優化方案，防抖用於減少函式請求次數，對於頻繁的請求，只執行這些請求的最後一次。

基礎版本

function debounce(func, wait = 300){
  let timer = null;
  return function(){
    if(timer !== null){
      clearTimeout(timer);
    }
    timer = setTimeout(func.bind(this),wait);
  }
}

改進版本新增是否立即執行的引數，因為有些場景下，我們希望函式能立即執行。

/**
 * @param {function} func - 執行函式
 * @param {number} wait - 等待時間
 * @param {boolean} immediate - 是否立即執行
 * @return {function}
 */
function debounce(func, wait = 300, immediate = false){
  let timer, ctx;
  let later = (arg) => setTimeout(()=>{
    func.apply(ctx, arg)
    timer = ctx = null
  }, wait)
  return function(...arg){
    if(!timer){
      timer = later(arg)
      ctx = this
      if(immediate){
        func.apply(ctx, arg)
      }
    }else{
      clearTimeout(timer)
      timer = later(arg)
    }
  }
}

使用

let scrollHandler = debounce(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler

節流

效能優化方案，節流用於減少函式請求次數，與防抖不同，節流是在一段時間執行一次。

/**
 * @param {function} func - 執行函式
 * @param {number} delay - 延遲時間
 * @return {function}
 */
function throttle(func, delay){
  let timer = null
  return function(...arg){
    if(!timer){
      timer = setTimeout(()=>{
        func.apply(this, arg)
        timer = null
      }, delay)
    }
  }
}

使用　

let scrollHandler = throttle(function(e){
  console.log(e)
}, 500)
window.onscroll = scrollHandler