防抖與節流（源碼學習）

instein 發布于2019-08-22 17:12 / 1395人閱讀

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

防抖與節流（源碼學習）

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

防抖

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

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

    return result;
  });

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

  return debounced;
};

節流

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

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

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

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

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

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

  return throttled;
};

總結

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

GPU云服務器云服務器 VUE防抖與節流防抖 VUE防抖源碼學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94959.html

高級函數技巧-函數防抖與節流

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數延遲秒后執行，在此秒內，然后函數再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。在實際開發中，函數一定是最實用最頻繁的一部分，無論是以函數為核心的函數式編程，還是更多人選擇的面向對象式的編程，都會有函數的身影，所以對函數進行深入的研究是非常有必要的。函數節流比較直白的說，函數節流就是強制規定一...

whinc 2019-08-22 11:21 評論0 收藏0
[譯]通過實例講解Debouncing和Throtting(防抖與節流)

摘要：譯通過實例講解和防抖與節流源碼中推薦的文章，為了學習英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術投稿。首次或立即你可能發現防抖事件在等待觸發事件執行，直到事件都結束后它才執行。 [譯]通過實例講解Debouncing和Throtting(防抖與節流) lodash源碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文鏈接作者：DAVID CORBACHO 本文來自一位...

Jenny_Tong 2019-08-23 13:42 評論0 收藏0
前端進擊的巨人（八）：淺談函數防抖與節流

摘要：隆重請出主角防抖與節流。防抖與節流的異同相同都是防止某一時間段內，函數被頻繁調用執行，通過時間頻率控制，減少回調函數執行次數，來實現相關性能優化。參考文章分鐘理解的節流防抖及使用場景函數防抖和節流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節流

摘要：文章來源詳談防抖和節流輕松理解函數節流和函數防抖函數防抖和節流好啦，今天的小菊花課堂之的防抖與節流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0