有點啰嗦，要源碼直接拉倒最后就行啦

什么是防抖？？

觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間；

舉個最常見的例子，就是輸入框的聯想

？.png

我們在輸入搜索關鍵詞的時候，下面就會立刻聯想出其他的關鍵詞，它的實現無非就是通過監控文本框的變化，每次輸入框發生變化就會重新請求聯想出來的關鍵詞再渲染到頁面中
而input事件在監控輸入框的變化時，哪怕一個字母或者輸一個拼音時它都會監控到并執行input對應的回調函數，向后端發送數據請求聯想的關鍵詞。
所以這就有些浪費性能了，防抖函數的作用就是在input變化時延遲回調函數的執行，我的例子都是圍繞這個例子來說的

實現防抖函數

• 準備
  創建debounce.js文件，
  結合上面的介紹應該知道了防抖是延遲事件監聽的回調函數執行，那么防抖函數至少有兩個參數：要延遲的回調和延遲多久執行

/*
 * fn: 回調函數
 * delay：延遲執行時間
 */
function debounce(fn, delay){
  
}

那么在使用的時候

input.addEventListener('input', debounce(fn, delay))

這樣是不行的，addEventListener里面的回調其實是debounce函數的返回值，所以debounce函數需要在return出去一個函數才能被addEventListener監聽回調，不然debounce的返回值就是undefined,
return出去的這個函數才是實現防抖功能的函數

function debounce(fn, delay){
  function _debounce(){}
  return _debounce
}

• 最基本的防抖函數
  既然要延遲那就需要用定時器了，只要沒有到定時器執行的時間，監聽的事件仍在觸發，那就要清除上一個定時器，重新創建定時器，直到到了定時器執行的時間用戶都沒有再輸入

base.png

function debounce(fn, delay) {
  // 存儲定時標識符，以便清除定時器
  let timer = null
  return function _debounce() {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn()
    }, delay)
  }
}

• 處理參數和this
  回調函數中是有參數的，比如說事件源對象e，回調函數中的this是指向addEventListener的調用者的，上面的回調函數fn是獨立函數調用，里面的this -> window，所以要對fn進行this綁定
  回調函數中的參數是js內部自動添加的，而執行的回調正好是return出的_debounce，所以自動添加的參數就會加到_debounce函數中，_debounce函數中的this也是addEventListener的調用者

function debounce(fn, delay) {
  let timer = null
  // 所以這個函數就可以使用...運算符收集js自動添加的參數到一個數組中
  return function _debounce(...arg) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      // 通過apply綁定this和傳遞參數，apply第二個參數正好是傳數組嘛
      fn.apply(this, arg)
    }, delay)
  }
}

• 立即執行
  目前我們實現的防抖函數不能立即執行，意思就是說，我們在delay時間段里不停的輸入，那么每輸入一次就會取消上一次的定時器創建新的定時器，那么回調函數就永遠不會執行，這樣的話對用戶體驗不好，所以立即執行的目的就是第一次輸入框發生變化就執行一次回調fn
  在debounce函數添加第三個參數immdiate 默認為false，在_debounce函數外創建一個標識，初始化為false。
  當輸入框第一次發生變化執行_debounce函數時先判斷immdiate 是否為ture并且isInvoke 是否為false，如果成立就立即執行一次回調并將isInvoke 置為true，說明已經執行過一次了，因為isInvoke 與_debounce之間形成了閉包，isInvoke不會被銷毀，那么再觸_debounce函數時isInvoke 就變成true了判斷不成立走else，直到定時器執行了再將isInvoke還原置為false，這就是相當于是一個周期了。下一次再輸入，立即執行，到定時器的回調執行、下一次再輸入，立即執行，到定時器的回調執行、下一次再輸入，立即執行，到定時器的回調執行······

function debounce(fn, delay, immdiate = false) {
  let timer = null
  let isInvoke = false
  return function _debounce(...arg) {
    if (timer) clearTimeout(timer)
    if (immdiate && !isInvoke) {
      fn.apply(this, arg)
      isInvoke = true
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arg)
        isInvoke = false
      }, delay)
    }
  }
}

• 取消功能
  那萬一有一個需求取消執行回調呢，哈哈哈，就是在定時器的回調還沒執行之前把他取消了，相信大家一下就知道，只需要將timer清除就行了
  那要如何做呢？
  我們可以再寫一個cancel方法加到_debounce函數上，函數的本質上也是一個對象嘛，所以就相當于在_debounce函數對象上添加一個cancel屬性，屬性值是一個函數
  取消的邏輯不僅是清除timer還要對isInvoke 進行還原，因為萬一用戶設置了立即執行，定時器沒有執行就沒有對isInvoke 進行還原，他又是一個閉包所以取消不還原那么他就保持了true，立即執行的功能就會永遠不執行

function debounce(fn, delay, immdiate = false) {
  let timer = null
  let isInvoke = false
  function _debounce(...arg) {
    if (timer) clearTimeout(timer)
    if (immdiate && !isInvoke) {
      fn.apply(this, arg)
      isInvoke = true
    } else {
      timer = setTimeout(() => {
        fn.apply(this, arg)
        isInvoke = false
        timer = null
      }, delay)
    }
  }

  // 取消功能
  _debounce.cancel = function () {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false

  }
  return _debounce
}

那么調用方法就變了
要執行取消，就得先獲取到_debounce函數對象

// 獲取dom的代碼未給出,相信你懂

// 要延遲的函數
const inputChange = function () {
  console.log("輸入框發生變化")
}

// 獲取_debounce函數對象
const debounceChange = debounce(inputChange, 3000, false)
// 進行input事件監聽
inputDom.addEventListener('input', debounceChange )
// 點擊按鈕取消
buttonDom.addEventListener('click', function () {
  debounceChange.cancel()
})

• 獲取返回值
  再來一個可能不存在的需求，如果我要獲取要延遲執行的回調函數fn的返回值呢？？？

const inputChange = function () {
  console.log("輸入框發生變化")
  return "想不到吧，產品經理讓你得到我的返回值"
}

獲取fn的返回值有兩種方法；
Promise和傳入回調函數，經過實踐這里使用Promise的方法來實現，用戶使用時不太優雅就不說了，說說用回調吧

因為函數中存在定時器，不能使用return返回值的方法，因為函數都執行完了定時器都還沒執行，return也不會執行了

debounce函數添加第四個參數resultCallback，類型是一個函數，不管是立即執行還是定時器執行fn都獲取到fn的返回值，然后調用傳進來的回調resultCallback，將這個結果作為回調resultCallback的參數，然后使用者那么就能拿到這個結果了，下面附上使用方法

function debounce(fn, delay, immdiate = false, resultCallback) {
  let timer = null
  let isInvoke = false
  function _debounce(...arg) {
    if (timer) clearTimeout(timer)
    if (immdiate && !isInvoke) {
      const result = fn.apply(this, arg)
      if (resultCallback && typeof resultCallback === "function") resultCallback(result)
      isInvoke = true
    } else {
      timer = setTimeout(() => {
        const result = fn.apply(this, arg)
        if (resultCallback && typeof resultCallback === "function") resultCallback(result)
        isInvoke = false
        timer = null
      }, delay)
    }

  }

  _debounce.cancel = function () {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  return _debounce
}

使用方法

const inputChange = function () {
  console.log("輸入框發生變化")
  return "想不到吧，產品經理讓你得到我的返回值"
}

const debounceChange = debounce(inputChange, 3000, false, (res) => {
  console.log("fn的返回值是:" + res);
})

inputDom.addEventListener('input', debounceChange)

ok了，哪有寫錯了，請不吝指正
最后附上完整代碼

function debounce(fn, delay, immdiate = false, resultCallback) {
  let timer = null
  let isInvoke = false
  function _debounce(...arg) {
    if (timer) clearTimeout(timer)
    if (immdiate && !isInvoke) {
      const result = fn.apply(this, arg)
      if (resultCallback && typeof resultCallback === "function") resultCallback(result)
      isInvoke = true
    } else {
      timer = setTimeout(() => {
        const result = fn.apply(this, arg)
        if (resultCallback && typeof resultCallback === "function") resultCallback(result)
        isInvoke = false
        timer = null
      }, delay)
    }

  }

  _debounce.cancel = function () {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }

  return _debounce
}