有點(diǎn)啰嗦，要源碼直接拉倒最后就行啦

什么是防抖？？

觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會執(zhí)行一次，如果n秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時間；

舉個最常見的例子，就是輸入框的聯(lián)想

？.png

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

實(shí)現(xiàn)防抖函數(shù)

• 準(zhǔn)備
  創(chuàng)建debounce.js文件，
  結(jié)合上面的介紹應(yīng)該知道了防抖是延遲事件監(jiān)聽的回調(diào)函數(shù)執(zhí)行，那么防抖函數(shù)至少有兩個參數(shù)：要延遲的回調(diào)和延遲多久執(zhí)行

/*
 * fn: 回調(diào)函數(shù)
 * delay：延遲執(zhí)行時間
 */
function debounce(fn, delay){
  
}

那么在使用的時候

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

這樣是不行的，addEventListener里面的回調(diào)其實(shí)是debounce函數(shù)的返回值，所以debounce函數(shù)需要在return出去一個函數(shù)才能被addEventListener監(jiān)聽回調(diào)，不然debounce的返回值就是undefined,
return出去的這個函數(shù)才是實(shí)現(xiàn)防抖功能的函數(shù)

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

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

base.png

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

• 處理參數(shù)和this
  回調(diào)函數(shù)中是有參數(shù)的，比如說事件源對象e，回調(diào)函數(shù)中的this是指向addEventListener的調(diào)用者的，上面的回調(diào)函數(shù)fn是獨(dú)立函數(shù)調(diào)用，里面的this -> window，所以要對fn進(jìn)行this綁定
  回調(diào)函數(shù)中的參數(shù)是js內(nèi)部自動添加的，而執(zhí)行的回調(diào)正好是return出的_debounce，所以自動添加的參數(shù)就會加到_debounce函數(shù)中，_debounce函數(shù)中的this也是addEventListener的調(diào)用者

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

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

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)
    }
  }
}

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

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
}

那么調(diào)用方法就變了
要執(zhí)行取消，就得先獲取到_debounce函數(shù)對象

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

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

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

• 獲取返回值
  再來一個可能不存在的需求，如果我要獲取要延遲執(zhí)行的回調(diào)函數(shù)fn的返回值呢？？？

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

獲取fn的返回值有兩種方法；
Promise和傳入回調(diào)函數(shù)，經(jīng)過實(shí)踐這里使用Promise的方法來實(shí)現(xiàn)，用戶使用時不太優(yōu)雅就不說了，說說用回調(diào)吧

因?yàn)楹瘮?shù)中存在定時器，不能使用return返回值的方法，因?yàn)楹瘮?shù)都執(zhí)行完了定時器都還沒執(zhí)行，return也不會執(zhí)行了

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

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("輸入框發(fā)生變化")
  return "想不到吧，產(chǎn)品經(jīng)理讓你得到我的返回值"
}

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
}