29_手写防抖节流 - 《JavaScript高级程序设计》

认识防抖和节流函数
自定义防抖
自定义节流
- 节流函数

title: 手写防抖节流
categories: Javascript
tag:

防抖
节流
date: 2021-11-30 19:35:34

认识防抖和节流函数

防抖和节流的概念其实最早并不是出现在软件工程中，防抖是出现在电子元件中，节流出现在流体流动中

而 JavaScript 是事件驱动的，大量的操作会触发事件，加入到事件队列中处理。
而对于某些频繁的事件处理会造成性能的损耗，我们就可以通过防抖和节流来限制事件频繁的发生；

防抖和节流函数目前已经是前端实际开发中两个非常重要的函数，也是面试经常被问到的面试题。

认识防抖 debounce 函数

我们用一副图来理解一下它的过程：

当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
当事件密集触发时，函数的触发会被频繁的推迟；
只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

29_手写防抖节流 - 图1

防抖的应用场景很多：

输入框中频繁的输入内容，搜索或者提交信息；
频繁的点击按钮，触发某个事件；
监听浏览器滚动事件，完成某些特定操作；
用户缩放浏览器的 resize 事件；

防抖函数的案例

我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容：

比如想要搜索一个 MacBook：

当我输入 m 时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
当继续输入 ma 时，再次发送网络请求；
那么 macbook 一共需要发送 7 次网络请求；
这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;

但是我们需要这么多次的网络请求吗？

不需要，正确的做法应该是在合适的情况下再发送网络请求；
比如如果用户快速的输入一个 macbook，那么只是发送一次网络请求；
比如如果用户是输入一个 m 想了一会儿，这个时候 m 确实应该发送一次网络请求；
也就是我们应该监听用户在某个时间，比如 500ms 内，没有再次触发时间时，再发送网络请求；

这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

29_手写防抖节流 - 图2

认识节流 throttle 函数

我们用一副图来理解一下节流的过程

当事件触发时，会执行这个事件的响应函数；
如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

29_手写防抖节流 - 图3

节流的应用场景：

监听页面的滚动事件；
鼠标移动事件；
用户频繁点击按钮操作；
游戏中的一些设计；

生活中的例子：防抖和节流

生活中防抖的例子：

比如说有一天我上完课，我说大家有什么问题来问我，我会等待五分钟的时间。

如果在五分钟的时间内，没有同学问我问题，那么我就下课了；

在此期间，a 同学过来问问题，并且帮他解答，解答完后，我会再次等待五分钟的时间看有没有其他同学问问题；
如果我等待超过了 5 分钟，就点击了下课（才真正执行这个时间）；

生活中节流的例子：

比如说有一天我上完课，我说大家有什么问题来问我，但是在一个 5 分钟之内，不管有多少同学来问问题，我只会解答一个问题；
如果在解答完一个问题后，5 分钟之后还没有同学问问题，那么就下课；

防抖案例准备

我们通过一个搜索框来延迟防抖函数的实现过程：

监听input的输入，通过打印模拟网络请求

测试发现快速输入一个macbook共发送了7次请求，显示我们需要对它进行防抖操作：

Underscore库的介绍

事实上我们可以通过一些第三方库来实现防抖操作：

lodash
underscore

这里使用underscore

我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多；
但是目前我看到underscore还在维护，lodash已经很久没有更新了；

Underscore的官网： https://underscorejs.org/

Underscore的安装有很多种方式：

下载Underscore，本地引入；
通过CDN直接引入；
通过包管理工具（npm）管理安装；

这里我们直接通过CDN：

Underscore库的介绍

<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

那么最终代码为

  <body>
    <input type="text" />
    <script    src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
      const inputEl = document.querySelector('input')
      let counter = 0
      const inputChange = function () {
        console.log(`发送了第${++counter}次网络请求`)
      }
      inputEl.oninput = _.debounce(inputChange, 2000)
    </script>
  </body>

节流的话。代码应该改为

  <body>
    <input type="text" />
    <script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>
    <script>
      const inputEl = document.querySelector('input')
      let counter = 0
      const inputChange = function () {
        console.log(`发送了第${++counter}次网络请求`)
      }
      //2秒发送一次请求
      inputEl.oninput = _.throttle(inputChange, 2000)
    </script>
  </body>

自定义防抖

防抖函数

在html中，我们引入自己写的debounce

  <body>
    <input type="text" />
    <script src="./26防抖节流/2.实现防抖.js"></script>
    <script>
      const inputEl = document.querySelector('input')
      let counter = 0
      const inputChange = function () {
        console.log(`发送了第${++counter}次网络请求`)
      }
      inputEl.oninput = debounce(inputChange, 2000)
    </script>
  </body>

首先我们，需要两个参数，一个是函数，一个是delay

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

以下代码就是防抖函数了

function debounce(fn, delay) {
  //定义一个定时器，保存上一次的定时器
  let timer = null
  //真正执行的函数
  const _debounce = function () {
    //清空上一次的定时器
    if (timer) clearTimeout(timer)
    // 延时器
    timer = setTimeout(() => {
      //外部传入的执行的函数
      fn()
    }, delay)
  }
  return _debounce
}

可是有bug。我们要改变this。和参数的情况。经过修改，最后的代码如下

function debounce(fn, delay) {
  //定义一个定时器，保存上一次的定时器
  let timer = null
  //真正执行的函数
  const _debounce = function (...args) {
    //清空上一次的定时器
    if (timer) clearTimeout(timer)
    // 延时器
    timer = setTimeout(() => {
      //外部传入的执行的函数
      fn.apply(this, args)
    }, delay)
  }
  return _debounce
}

debounce优化1

立即执行功能

优化debounce，我们希望防抖，第一次立即执行。有些人不想立即执行。那么我们需要设置第三个参数，判断第一次是否立即执行

function debounce(fn, delay, immediate = false) {
  //定义一个定时器，保存上一次的定时器
  let timer = null
  //有没有立即执行过
  let isInvoke = false
  //真正执行的函数
  const _debounce = function (...args) {
    //清空上一次的定时器
    if (timer) clearTimeout(timer)
    if (immediate && !isInvoke) {
      fn.apply(this, args)
      isInvoke = true
    } else {
      // 延时器
      timer = setTimeout(() => {
        //外部传入的执行的函数
        fn.apply(this, args)
        isInvoke = false
      }, delay)
    }
  }
  return _debounce
}

debounce优化2

如果用户输入了之后，点击了取消，那么我们不需要等最后一个定时器,不会再去请求最后一个

  <body>
    <input type="text" />
    <button id="cancel">取消</button>
    <script src="./26防抖节流/4.防抖取消.js"></script>
    <script>
      const inputEl = document.querySelector('input')
      const cancelBtn = document.querySelector('#cancel')
      let counter = 0
      const inputChange = function (event) {
        console.log(`发送了第${++counter}次网络请求`, this, event)
      }
      const debounceChange = debounce(inputChange, 1000, true)
      inputEl.oninput = debounceChange
      cancelBtn.onclick = function () {
        debounceChange.cancel()
      }
    </script>
  </body>

防抖代码

function debounce(fn, delay, immediate = false) {
  //定义一个定时器，保存上一次的定时器
  let timer = null
  //有没有立即执行过
  let isInvoke = false
  //真正执行的函数
  const _debounce = function (...args) {
    //清空上一次的定时器
    if (timer) clearTimeout(timer)
    if (immediate && !isInvoke) {
      fn.apply(this, args)
      isInvoke = true
    } else {
      // 延时器
      timer = setTimeout(() => {
        //外部传入的执行的函数
        fn.apply(this, args)
        isInvoke = false
      }, delay)
    }
  }
  _debounce.cancel = function () {
    if (timer) clearTimeout(timer)
    timer = null
    isInvoke = false
  }
  return _debounce
}

自定义节流

节流函数

基本节流函数的实现

这个默认第一次是触发的

function throttle(fn, interval) {
  //记录上一次的开始时间
  let lastTime = 0
  //事件触发时，真正执行的函数
  const _throttle = function () {
    // 获取当前事件触发时的时间
    const nowTime = new Date().getTime()
    // 获取离触发时间还剩多少时间
    const remainTime = interval - (nowTime - lastTime)
    if (remainTime <= 0) {
      //真正触发的函数
      fn()
      //把上一次的时间重新赋值
      lastTime = nowTime
    }
  }
  return _throttle
}