手寫防抖(Debouncing)和節流(Throttling)

1、防抖函數

　　典型的例子：限制鼠標的連擊觸發

　　當一次事件觸發后，事件處理器要等一定閾值的時間，如果這段時間過去后，再也沒有事件發生，就處理最后一次發生的事件。

　　假設還差0.01秒就到達指定時間，這時又來了一個事件，那么之前的等待作廢，需要重新再等待指定的時間

// 防抖動函數
function debounce(fn,wait=50,immediate) {
    let timer;
    return function() {
        if(immediate) {
            fn.apply(this,arguments)
        }
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=> {
            fn.apply(this,arguments)
        },wait)
    }
}

結合一下實例：滾動防抖

// 簡單的防抖動函數
// 實際想綁定在 scroll 事件上的 handler
function realFunc(){
    console.log("Success");
}

// 采用了防抖動
window.addEventListener('scroll',debounce(realFunc,500));
// 沒采用防抖動
window.addEventListener('scroll',realFunc);

2、節流：

　　可以理解為事件在一個管道中傳輸，加上這個節流閥以后，事件的流速就會減慢。

　　實際上這個函數的作用就是如此，它可以將一個函數的調用頻率限制在一定閾值內，例如 1s，那么 1s 內這個函數一定不會被調用兩次

　　

簡單的節流函數：

function throttle(fn, wait) {
    let prev = new Date();
    return function() { 
        const args = arguments;
        const now = new Date();
        if (now - prev > wait) {
            fn.apply(this, args);
            prev = new Date();
        }
    }

3、結合實踐

　　通過第三個參數來控制切換

const throttle = function(fn, delay, isDebounce) {
  let timer
  let lastCall = 0
  return function (...args) {
    if (isDebounce) {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        fn(...args)
      }, delay)
    } else {
      const now = new Date().getTime()
      if (now - lastCall < delay) return
      lastCall = now
      fn(...args)
    }
  }
}

 

　　ending。。。。。。