從搜索系統來聊聊防抖和節流

時間  2019-11-06
標籤 搜索 系統 聊聊 節流 简体版
原文   原文鏈接

最近公司作一個內部的搜索系統，由於搜索框須要搜索功能須要頻繁的去發送請求，這很明顯的會給服務器帶來壓力，那麼這時候就要用到防抖和節流的知識點了javascript

防抖函數debounce

好比咱們的百度搜索，搜索的時候有關鍵字的提醒，關鍵字的來源來自於客戶端向服務端請求獲得的數據，咱們經過keyup事件去監聽觸發請求，若是返回值的搜索key已經不是搜索框如今的值，就丟棄掉此次返回，因而咱們提出這樣一個優化需求：觸發事件，可是我必定在事件觸發n秒後才執行，若是你在一個事件觸發的n秒內又觸發了這個事件，那我就以新的事件的時間爲準，n 秒後才執行css

那麼咱們來動手實現咱們的初版的防抖函數吧：html

function debounce(fn,wait){
     let timeout
     return function(){
         if(timeout){
             clearTimeout(timeout)
         }
        timeout=setTimeout(fn,wait)
     }
}
複製代碼

初版代碼已經實現了，咱們來寫個demo驗證下吧：java

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style> #search { width: 400px; margin-left: 300px; margin-bottom: 50px; } #showSearch { width: 800px; height: 100px; background: lightblue; color: red; margin-left: 300px; } </style>
  </head>
  <body>
    <input type="search" name="" id="search" />
    <div id="showSearch"></div>
  </body>
  <script> function debounce(fn, wait) { let timeout; return function() { if (timeout) { clearTimeout(timeout); } timeout = setTimeout(fn, wait); }; } let search = document.querySelector("#search"); let showSearch = document.querySelector("#showSearch"); function getSearchInfo(e) { // showSearch.innerText = this.value; // 報錯 // console.log(e); // undefined showSearch.innerText = search.value; } search.onkeyup = debounce(getSearchInfo, 1000); </script>
</html>

複製代碼

效果圖：服務器

能夠看到執行上面的demo，咱們輸入值之後不觸發keyup事件就會隔1秒鐘藍色div纔會出現字，若是你一直觸發是不會顯示的等到你中止觸發後的一秒後才顯示

有同窗可能對初版代碼以爲挺簡單的，確實簡單，不過我仍是要囉嗦幾句，初版的代碼中，debounce函數返回了一個匿名函數，而這匿名函數又引用了timeout這個變量，這樣就造成了閉包，也就是函數的執行上下文的活動對象並不會被銷燬，保存了timeout變量，才能實現咱們這個若是你在一個事件觸發的n秒內又觸發了這個事件，那我就以新的事件的時間爲準，n 秒後才執行的需求閉包

修復this指向和event問題

顯然上述中的代碼還存留了二個問題就是this問題，咱們this指向的不是window對象，而是指向咱們的dom對象，第二個就是event對象，event對象在這裏會報undefined，那麼接下來咱們來完善咱們的第二版代碼吧：app

第二版本的防抖函數dom

function debounce(fn, wait) {
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
          fn.apply(context, args);
        }, wait);
      };
    }
複製代碼

第二版代碼已經實現了，咱們來寫個demo驗證下吧：異步

let search = document.querySelector("#search");
    let showSearch = document.querySelector("#showSearch");
    function getSearchInfo(e) {
      showSearch.innerText = this.value; 
      console.log(e); 
    }
    search.onkeyup = debounce(getSearchInfo, 1000);
複製代碼

效果圖: 函數

這裏涉及的知識點就是this指向和arguments、apply等，先來講說arguments屬性，咱們知道能夠經過arguments屬性獲取函數的參數值，而dom事件操做中，會給回調函數（這裏回調函數是debounce函數返回的閉包函數）傳遞一個event參數,這樣咱們就能夠經過arguments屬性拿到event屬性，那麼問題二就解決啦，再來講說問題一的this指向，此時這裏keyup事件的回調函數是debounce函數返回的閉包函數而不是getSearchInfo函數（可是咱們但願處理業務邏輯的getSearchInfo的this指向可以指向dom對象），咱們知道this的指向是我最後被誰調用，我就指向誰，那麼我這裏被search調用因此this指向search，可是因爲有setTimeout異步操做，咱們getSearchInfo函數的this指向是window（非嚴格模式下），因此咱們須要改變getSearchInfo的指向，這樣咱們用apply就完美實現了

當即執行

這時候咱們開發的問題解決了，可是萬惡的產品又提出了一個新的需求方案：我不但願非要等到事件中止觸發後才執行，我但願馬上執行函數，而後等到中止觸發 n 秒後，才能夠從新觸發執行，那咱們就來實現這個新需求吧

// 參數immediate值 true||false
    function debounce(fn, wait, immediate) {
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已經執行過，再也不執行
          timeout = setTimeout(function() {
            timeout = null;
          }, wait);
          if (callNow) fn.apply(context, args);
        } else {
          timeout = setTimeout(function() {
            fn.apply(context, args);
          }, wait);
        }
      };
    }
複製代碼

demo使用:

search.onkeyup = debounce(getSearchInfo, 100, true);
複製代碼

效果圖以下:

取消功能

雖然咱們的防抖函數已經很完善了，可是咱們但願它能支持取消的功能，那接着來完善咱們的代碼吧

第三版本的防抖函數

// 參數immediate值 true||false
    function debounce(fn, wait, immediate) {
      let timeout;
      let debounced = function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已經執行過，再也不執行
          timeout = setTimeout(function() {
            timeout = null;
          }, wait);
          if (callNow) fn.apply(context, args);
        } else {
          timeout = setTimeout(function() {
            fn.apply(context, args);
          }, wait);
        }
      };
      debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
      };
      return debounced
    }
複製代碼

修復result bug

到此，咱們的防抖函數基本實現了，可是細心的同窗可能會發現，若是fn函數參數存在return值，咱們須要去接收它，那麼來修復這個小Bug吧

第四版本的防抖函數

// 參數immediate值 true||false
    function debounce(fn, wait, immediate) {
      let timeout, result;
      let debounced = function() {
        let context = this;
        let args = arguments;
        if (timeout) {
          clearTimeout(timeout);
        }
        let callNow = !timeout;
        if (immediate) {
          // 已經執行過，再也不執行
          timeout = setTimeout(function() {
            timeout = null;
          }, wait);
          if (callNow) {
            result = fn.apply(context, args);
          }
        } else {
          timeout = setTimeout(function() {
            result = fn.apply(context, args);
            console.log(result);
          }, wait);
        }
      };
      debounced.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
      };
      return debounced;
    }
複製代碼

到這裏咱們的防抖函數已經實現了，你們能夠動手實現下

防抖函數的總結

上面羅裏吧嗦的說了一堆，實際上能夠精簡成兩個需求

  • 非當即執行:，若是你在一個事件觸發的n秒內又觸發了這個事件，那我就以新的事件的時間爲準，n 秒後才執行
  • 當即執行：我不但願非要等到事件中止觸發後才執行，我但願馬上執行函數，而後等到中止觸發 n 秒後，才能夠從新觸發執行

咱們能夠按照當即執行和非當即執行這兩個需求去理解咱們的防抖函數

節流 throttle

持續觸發事件，每隔一段時間，只執行一次事件。

節流相對來講仍是很好理解了，固然了他也有跟防抖函數同樣有當即執行和非當即執行兩個需求，那咱們實現throttle函數的代碼吧

當即執行

咱們可使用時間戳，當觸發事件的時候，咱們取出當前的時間戳，而後減去以前的時間戳(最一開始值設爲 0)，若是大於設置的時間週期，就執行函數，而後更新時間戳爲當前的時間戳，若是小於，就不執行

function throttle(fn, wait) {
      let context, args;
      let previous = 0;
      return function() {
        let now = +new Date();
        context = this;
        args = arguments;
        if (now - previous > wait) {
          fn.apply(context, args);
          previous = now;
        }
      };
    }
複製代碼

demo使用：

demo跟上述防抖用是同樣

search.onkeyup = throttle(getSearchInfo, 3000);
複製代碼

這裏的節流當即執行版跟咱們的防抖初版的知識點原理同樣，再也不過多的贅述

非當即執行

非當即執行就是過了n秒後咱們再執行，那麼咱們天然而然想到定時器

function throttle(fn, wait) {
      let timeout;
      return function() {
        let context = this;
        let args = arguments;
        // 這裏不須要清除定時器 清除了會從新計算時間
        // 清除這個定時器不表明timeout爲空
        if (timeout) {
          return false;
        }
        timeout = setTimeout(function() {
          fn.apply(context, args);
          timeout = null;
        }, wait);
      };
    }
複製代碼

demo使用

function getSearchInfo(e) {
      console.log(this.value);
      // 驗證的效果是 showSearch多久才能讀到這個this.value
      showSearch.innerText = this.value;

    }
    search.onkeyup = throttle(getSearchInfo, 3000);
複製代碼

此次的效果是等待過了三秒才執行，那咱們來比較當即執行和非當即執行的效果

  • 當即執行會馬上執行，非當即執行會在 n 秒後第一次執行
  • 當即執行中止觸發後沒有辦法再執行事件，非當即執行中止觸發後依然會再執行一次事件

一統當即執行和非當即執行

咱們的需求想要這樣：我觸發這個事件想要當即執行，事件中止觸發後再執行一遍,也就是n秒內，假設我觸發事件大於等於兩次，先會當即執行，最後會再觸發一次

function throttle(fn, wait) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等於null,表明定時器已經完成
      // 最後觸發的函數
      let later = function() {
        previous = +new Date();
        timeout = null;
        fn.apply(context, args);
        console.log("最後執行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        // 下次觸發fn剩餘的時間
        remaining = wait - (now - previous);
        // 表明我這個定時器執行完了 那麼就執行n秒後(好比：3~6秒)的事件操做
        // 若是沒有剩餘的時間
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 當即執行
          fn.apply(context, args);
        } else if (!timeout) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }
複製代碼

效果圖：

包含當即執行和非當即執行

有時候咱們想要一種狀況就行，想要當即執行不須要再去執行一次，或者想要最後執行一次，不須要當即執行，那咱們對上述作個兼容

實現方式是定義一個options對象，禁止當即執行或者非當即執行

  • immediate：false 表示禁用第一次執行
  • last: false 表示禁用中止觸發的回調
function throttle(fn, wait, options) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等於null,表明定時器已經完成
      // 若是沒有傳options默認爲空
      if (!options) {
        options = {}; // 雖然沒有聲明options, 至關於window.options={}
      }
      let later = function() {
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同於:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        console.log("最後執行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次觸發 func 剩餘的時間
        remaining = wait - (now - previous);
        // 表明我這個定時器執行完了 那麼就執行n秒後(好比：3~6秒)的事件操做
        // 若是沒有剩餘的時間了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 當即執行
          fn.apply(context, args);
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }
複製代碼

demo使用：

search.onkeyup = throttle(getSearchInfo, 3000, { immediate: true, last: false });
複製代碼

優化throttle函數

上述例子中咱們使用了閉包，而閉包所引用的變量挺多的，可是一直沒有被gc回收，咱們來手動回收下這些變量

function throttle(fn, wait, options) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等於null,表明定時器已經完成
      // 若是沒有傳options默認爲空
      if (!options) {
        options = {}; // 雖然沒有聲明options, 至關於window.options={}
      }
      let later = function() {
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同於:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        if (!timeout) context = args = null;
        console.log("最後執行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次觸發 func 剩餘的時間
        remaining = wait - (now - previous);
        // 表明我這個定時器執行完了 那麼就執行n秒後(好比：3~6秒)的事件操做
        // 若是沒有剩餘的時間了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 當即執行
          fn.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      return throttled;
    }
複製代碼

取消功能

咱們再拓展個取消功能，取消功能實際就是取消定時器，讓它在這一次事件觸發中當即執行

function throttle(fn, wait, options) {
      let timeout, remaining, context, args;
      let previous = 0;
      // timeout等於null,表明定時器已經完成
      // 若是沒有傳options默認爲空
      if (!options) {
        options = {}; // 雖然沒有聲明options, 至關於window.options={}
      }
      let later = function() {
        // previous = +new Date();
        previous = options.immediate == false ? 0 : new Date().getTime(); // +new Date() 等同於:new Date().getTime()
        timeout = null;
        fn.call(context, args);
        if (!timeout) context = args = null;
        console.log("最後執行的");
      };
      let throttled = function() {
        context = this;
        args = arguments;
        let now = +new Date();
        if (!previous && options.immediate === false) {
          previous = now;
        }
        // 下次觸發 func 剩餘的時間
        remaining = wait - (now - previous);
        // 表明我這個定時器執行完了 那麼就執行n秒後(好比：3~6秒)的事件操做
        // 若是沒有剩餘的時間了
        if (remaining <= 0) {
          if (timeout) {
            clearTimeout(timeout);
            timeout = null;
          }
          previous = now;
          // 當即執行
          fn.apply(context, args);
          if (!timeout) context = args = null;
        } else if (!timeout && options.last !== false) {
          timeout = setTimeout(later, remaining);
        }
      };
      throttled.cancel = function() {
        clearTimeout(timeout);
        timeout = null;
        previous = 0;
      };
      return throttled;
    }
複製代碼

到這裏咱們的節流函數就基本實現完了，接下來那聊聊防抖函數和節流函數的區別吧

防抖和節流的區別

實際上防抖和節流都是限制一些頻繁的事件觸發（window 的 resize、scroll、mousedown、mousemove、keyup、keydown）,但他們仍是有實質性的區別的

  • 防抖是雖然事件持續觸發，但只有等事件中止觸發後n秒才執行函數(若是你在時間內從新觸發事件，那麼時間就從新算，這是防抖的特色，能夠按照這個特色選擇場景)。好比生活中的坐公交，就是必定時間內，若是有人陸續刷卡上車，司機就不會開車。只有別人沒刷，司機纔開車。

  • 節流是持續觸發的時候，每隔n秒執行一次函數好比人的眨眼睛，就是必定時間內眨一次。這是函數節流最形象的解釋

總結

防抖函數和節流函數涉及到的知識點不少，他們以接收一個函數爲參數，實際就是一個高階函數，也用到了閉包，this指向，apply等知識點，固然函數的實現是參考大佬的博客，我這裏就是作下記錄以及總結

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程