前言

又是一個(gè)源碼閱讀的周末，這次來閱讀和防抖相關(guān)的源碼。我已經(jīng)和防抖節(jié)流打過很多次交道了，感興趣的朋友也可以去看看我之前有關(guān)防抖節(jié)流的文章。咱們?cè)挷欢嗾f，直接進(jìn)入正題。

underscore 和防抖

這次我們主要介紹防抖。（畢竟咱們標(biāo)題就是跟著underscore學(xué)防抖??）

雖然我們對(duì)防抖的概念已經(jīng)很清楚了，但是我在這里還是不得不多提一嘴，關(guān)于防抖節(jié)流請(qǐng)務(wù)必好好掌握。那么，防抖該如何定義呢？防抖就是要延遲執(zhí)行，我們一直操作觸發(fā)事件并且不執(zhí)行，只有當(dāng)停止操作后等才會(huì)執(zhí)行。防抖適合多次事件一次響應(yīng)的情況。

這里再介紹一下underscore吧。underscore是一個(gè)JavaScript工具庫，它提供了很多常用函數(shù)的源碼，這也就是此文標(biāo)題的由來了??。

源碼解讀

我們找到如下部分即可。

整個(gè)防抖源碼的部分并不多，不過四十多行，源碼部分如下：

export default function debounce(func, wait, immediate) {
  var timeout, previous, args, result, context;

  var later = function () {
    var passed = now() - previous;

    if (wait > passed) {
      timeout = setTimeout(later, wait - passed);
    } else {
      timeout = null;
      if (!immediate) result = func.apply(context, args);
      if (!timeout) args = context = null;
    }
  };
  var debounced = restArguments(function (_args) {
    context = this;
    args = _args;
    previous = now();
    if (!timeout) {
      timeout = setTimeout(later, wait);
      if (immediate) result = func.apply(context, args);
    }
    return result;
  });
  debounced.cancel = function () {
    clearTimeout(timeout);
    timeout = args = context = null;
  };

  return debounced;
}

我們現(xiàn)在來分析一下這段代碼。

首先定義了一系列變量 timeout, previous, args, result, context。然后又定義了一個(gè)later函數(shù)，later函數(shù)中的 timeout=null 是為了清空timeout，也可以理解為在重置timeout，防止影響它下次使用。

然后在debounce函數(shù)執(zhí)行了later函數(shù)。

 if (!timeout) {
      timeout = setTimeout(later, wait);
      if (immediate) result = func.apply(context, args);
    }

和我們之前手寫代碼的防抖有所不同的是，這里加入了cancle取消方法，可以隨時(shí)取消執(zhí)行函數(shù)，這里算是整個(gè)源碼部分比較新穎的一點(diǎn)吧，我也是第一次認(rèn)識(shí)到，學(xué)習(xí)了。

 debounced.cancel = function () {
    clearTimeout(timeout);
    timeout = args = context = null;
  };

總結(jié)

之前手寫過防抖節(jié)流，這次又跟著underscore學(xué)習(xí)防抖的源碼，我對(duì)防抖這一部分的認(rèn)識(shí)又更進(jìn)了一步，也對(duì)這些函數(shù)的運(yùn)用有了更好的理解。除此之外，也了解了underscore這個(gè)工具庫，收獲滿滿。

以上就是underscore 防抖學(xué)習(xí)的詳細(xì)內(nèi)容，更多關(guān)于underscore 防抖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論