防抖與節(jié)流（源碼學習）

instein 發(fā)布于2019-08-22 17:12 / 1397人閱讀

摘要：防抖與節(jié)流源碼學習最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學習過程源碼來源防抖函數(shù)防抖使用場景現(xiàn)在我們需要做一個搜索框，當用戶輸入文字，執(zhí)行事件的時候，需要發(fā)出異步請求去進行結(jié)果查詢。

防抖與節(jié)流（源碼學習）

最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學習過程
源碼來源：underscore

防抖

函數(shù)防抖（debounce）
使用場景：現(xiàn)在我們需要做一個搜索框，當用戶輸入文字，執(zhí)行keyup事件的時候，需要發(fā)出異步請求去進行結(jié)果查詢。但如果用戶快速輸入了一連串字符，例如是5個字符，那么此時會瞬間觸發(fā)5次請求，這肯定不是我們希望的結(jié)果。我們想要的是用戶停止輸入的時候才去觸發(fā)查詢的請求，這個時候函數(shù)防抖可以幫到我們
原理：讓函數(shù)在上次執(zhí)行后，滿足等待某個時間內(nèi)不再觸發(fā)次函數(shù)后再執(zhí)行，如果觸發(fā)則等待時間重新計算

function debounce (func, wait, immediate) {
  var timeout, result;

  var later = function (context, args) {
    timeout = null;//重置
    if (args) result = func.apply(context, args);
  };

  var debounced = restArguments(function (args) {
    if (timeout) clearTimeout(timeout);//如果觸發(fā)則等待時間重新計算
    if (immediate) {//應用場景,比如提交表單，需要立即執(zhí)行一次
      var callNow = !timeout;//是否為第一次觸發(fā)，如果是第一次觸發(fā)，timeout是undefined
      timeout = setTimeout(later, wait);//注意，這里沒有args，僅僅只是在wait毫秒后重置清空timeout，
      if (callNow) result = func.apply(this, args);//如果是immediate且是第一次觸發(fā)，立即執(zhí)行一次；result為立即執(zhí)行的結(jié)果，這里this直接綁定到用戶的func
    } else {
      timeout = delay(later, wait, this, args);//settimeout，注意：這里的this通過參數(shù)傳給later綁定到func
    }

    return result;
  });

  //重置，取消執(zhí)行
  debounced.cancel = function () {
    clearTimeout(timeout);
    timeout = null;
  };

  return debounced;
};

節(jié)流

函數(shù)節(jié)流（throttle）
使用場景：window.onscroll，以及window.onresize等，每間隔某個時間去執(zhí)行某函數(shù)，避免函數(shù)的過多執(zhí)行
原理：與函數(shù)防抖不同，它不是要在每完成某個等待時間后去執(zhí)行某個函數(shù)，而是要每間隔某個時間去執(zhí)行某個函數(shù)

//   leading：是否立即執(zhí)行
//   trailing: true // wait期間如果再次調(diào)用，是否會在周期后邊緣(wait剛結(jié)束)再次執(zhí)行

//leading = true;trailing = true; 調(diào)用立即執(zhí)行一次，wait期間如果再次調(diào)用，會在周期后邊緣(wait剛結(jié)束)再次執(zhí)行
//leading = true;trailing = false; 調(diào)用立即執(zhí)行一次，wait期間如果再次調(diào)用，什么也不做
//leading = false;trailing = true; 調(diào)用需等待wait時間，wait期間如果再次調(diào)用，會在周期后邊緣(wait剛結(jié)束)執(zhí)行
//leading = false;trailing = false; 調(diào)用需等待wait時間，wait期間如果再次調(diào)用，什么也不做
function throttle (func, wait, options) {
  var timeout, context, args, result;
  var previous = 0;//上次執(zhí)行時間
  if (!options) options = {};

  var later = function () {
    previous = options.leading === false ? 0 : _.now();//設(shè)置為0的話下次調(diào)用會立即執(zhí)行
    timeout = null;
    result = func.apply(context, args);//可能設(shè)置timeout?
    if (!timeout) context = args = null;
  };

  var throttled = function () {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;//如果不是立即執(zhí)行
    var remaining = wait - (now - previous);//剩余時間
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {//開始執(zhí)行
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;//記錄執(zhí)行時間
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);//注意只有這個地方對timeout賦值了且調(diào)用了later
    }
    return result;
  };

  //取消
  throttled.cancel = function () {
    clearTimeout(timeout);
    previous = 0;
    timeout = context = args = null;
  };

  return throttled;
};

總結(jié)

所有學習過程可見注釋，完整注釋GitHub地址
其中我在造輪播圖的輪子的過程中，引入了節(jié)流來優(yōu)化用戶主動點擊切換，一次來提升用戶體驗，感覺上還是好很多的。
輪播圖演示地址