函數節流和函數防抖

從場景說起

滑動到底部繼續加載，是移動端很常見的一種場景。

通常來說，我們會在對可滑動區域（一般是window）的scroll事件做監聽，判斷距離底部還有多遠，如果距離底部較近，則發起HTTP請求，請求下一頁的資料。

很容易寫出這樣的代碼：

let page = 0;

document.querySelector('.main').addEventListener('scroll', () => {
  scrollMore(this);
})

// 滑動擷取更多内容
function scrollMore(el) {
  if (getScrollTop(el) + getClientHeight() >= getScrollHeight(el) - 100) {
    fetch('http://api.jd.com/somethings/' + page++)
      .then(function(response) {
        console.log(response.json());
        // do something 把資料填充到頁面上
      })
  }
}

function getScrollTop(el) { //取視窗滾動條高度
  return el.scrollTop;
}

function getClientHeight() { //取視窗可視範圍的高度
  let clientHeight = 0;
  if (document.body.clientHeight && document.documentElement.clientHeight) {
    clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
  } else {
    clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
  }
  return clientHeight;
}

function getScrollHeight(el) { //取文檔内容實際高度
  return Math.max(document.body.scrollHeight, el.scrollHeight);
}                 

但是這樣很容易就發現一個問題，觸發的scroll事件太頻繁了，在一些低端機上，可能會卡頓。

其實我們的判斷沒有必要這麼頻繁，使用者的滑動操作是一段時間内不停觸發的。

我們希望在一小段時間内，隻觸發一次執行。

函數節流

這就是函數節流要做的事情，《JavaScript進階程式設計》中給了一個方法：

function throttle (method, context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function () {
        method.call(context);
    }, 100)
}                

這個代碼的原理就是在多次執行的時候，清除上一次的timeout，如果時間間隔沒有超過100ms，則又建立一個新的timeout，舊的則被丢棄。

考慮一下，如果在一段時間内，每隔99ms觸發一次，那麼不停地清除上一次的timeout，函數将永遠不會執行。

我們更希望，每隔100ms，函數就執行一次，而不是像現在一樣。

重新思考這個問題。

關鍵點有兩個：

1. 間隔
2. 執行

先來把函數封裝一下，将節流函數return出來：

function throttle1 (method, delay) {
    let timer = null;

    return function () {
      let
        context = this
      ;
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        method.call(context);
      }, delay)
    }
  }                

加上間隔判定：

function throttle2 (method, delay) {
    let timer = null;
    let start;
    return function () {
      let
        context = this
        , current = Date.now()
      ;

      if (timer) clearTimeout(timer);

      if (!start) {
        start = current;
      }

      if (current - start >= delay) {
        method.call(context);
        start = current;
      } else {
        timer = setTimeout(() => {
          method.call(context);
        }, delay)
      }
    }
  }                

這樣，基本上完成了一個throttle函數。

函數防抖

防抖的場景也比較常見。

比如搜尋時，監聽使用者輸入，提供聯想詞；或者使用者連續點選送出按鈕的場景。

說實話，我感覺《進階》那本書裡的節流例子，就是一個防抖的版本。

幾乎可以拿來就用。

我們還是做一個比較完善的版本。

function debounce (method, delay) {
    let timeout = null;
    return function () {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        method.apply(this, arguments);
      }, delay);
    };
  }                

轉載于:https://www.cnblogs.com/liuyongjia/p/9457199.html