函數防抖和節流

在網上，關於防抖和節流的實現方式已經不少了，這裏也就不在依依列舉，只是說說這兩種思想方式，要注意，函數防抖和節流只是一種解決問題的設計思想罷了。

思想原因

在瀏覽器中，頻繁的操做 DOM 是很是消耗內存和 CPU 時間，在咱們項目開發過程當中，或多或少會綁定一些持續觸發的事件，如 resize，scroll，mousemove 以及移動端 touchmove 等。同一個事件在同一刻產生大量的事件函數，若處理不當，輕則致使瀏覽器卡頓，重則致使瀏覽器崩潰，不管出現哪一種狀況，都不是咱們所指望的，此時，函數防抖 (debounce) 和節流 (throttle) 的思想應運而生。

函數防抖和節流就是爲了處理同一時刻事件的觸發頻率和事件函數的執行頻率這二者關係的。 咱們知道 DOM 事件的觸發頻率是不可控的，所以咱們只能控制事件函數的執行頻率，只要是沒有達到條件要求的事件，都不觸發事件函數，經過這一手段，能夠極大的優化瀏覽器的性能。

函數防抖

函數防抖是指某事件被頻繁的觸發，在延遲必定的時間內，若該事件沒有繼續被觸發，則執行事件函數，在整個過程當中，事件函數只會被觸發一次。

應用場景：在事件連續觸發過程當中，你指望事件函數只執行一次，例如：Ajax實時搜索（keydown）。

舉個例子，咱們在瀏覽頁面內容的時候常常會使用到滾動條，若此時咱們綁定了一個滾動條事件，可是，並無加任何的防抖保護，這意味着用戶只要觸動了滾動條，就會產生成百上千條滾動事件，進而觸發成百上千次事件函數，若每條事件函數的時間複雜度爲O(n²)，後果可想而知，直接把瀏覽器搞崩了，這樣的產品，還沒開始，已經結束了。

此時，若加上防抖，效果就大大的不一樣了，咱們雖然沒法阻止事件的觸發頻率，可是能夠控制事件函數的執行頻率，不管你觸發了多少次事件，只要在保護時間內有觸發，就不執行事件函數，反之，執行。

沒有什麼能比圖片更形象的了👇

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

防抖的核心就是經過定時器來延遲事件函數的執行，在未達到定時器時間狀況下，依舊產生了觸發事件，就將上一個定時器刪除。

函數節流

函數節流是指某事件被頻繁的觸發，在事件觸發期間，它會週期的執行事件函數。

舉個例子，水滴的下落，咱們將水喉撥到一個角度，水滴會週期性一滴一滴的滴落。

應用場景：在事件連續觸發過程當中，你指望週期性的間隔必定時間來調用回調函數，例如：計算鼠標移動的距離（mousemove）

function throttle(func, wait) {
  let timer = null;
  return function() {
    let _this = this;
    let args = arguments;
    if (!timer) {
      timer = setTimeout(function() {
        func.apply(_this, args)
        timer = null
      }, delay)
    }
  }
}
複製代碼