javascript 实现防抖函数

有点啰嗦，要源码直接拉倒最后就行啦

什么是防抖？？

触发高频事件后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
}