防抖节流函数

MINT
133 阅读4分钟

跟着coderwhy学习

1.认识防抖和节流函数

  • 我们用一副图来理解一下它的过程：
    • 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间；
    • 当事件密集触发时，函数的触发会被频繁的推迟；
    • 只有等待了一段时间也没有事件触发，才会真正的执行响应函数；

image.png

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

2.防抖函数的案例

  • 我们都遇到过这样的场景，在某个搜索框中输入自己想要搜索的内容： image.png
  • 比如想要搜索一个MacBook：
    • 当我输入m时，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；
    • 当继续输入ma时，再次发送网络请求；
    • 那么macbook一共需要发送7次网络请求；
    • 这大大损耗我们整个系统的性能，无论是前端的事件处理，还是对于服务器的压力;
  • 但是我们需要这么多次的网络请求吗？
    • 不需要，正确的做法应该是在合适的情况下再发送网络请求；
    • 比如如果用户快速的输入一个macbook，那么只是发送一次网络请求；
    • 比如如果用户是输入一个m想了一会儿，这个时候m确实应该发送一次网络请求；
    • 也就是我们应该监听用户在某个时间，比如500ms内，没有再次触发时间时，再发送网络请求；
  • 这就是防抖的操作：只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数；

3.认识节流throttle函数

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

    • 当事件触发时，会执行这个事件的响应函数；

    • 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；

    • 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；

image.png

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

4.节流函数的应用场景

  • 很多人都玩过类似于飞机大战的游戏
  • 在飞机大战的游戏中，我们按下空格会发射一个子弹：
    • 很多飞机大战的游戏中会有这样的设定，即使按下的频率非常快，子弹也会保持一定的频率来发射；
    • 比如1秒钟只能发射一次，即使用户在这1秒钟按下了10次，子弹会保持发射一颗的频率来发射；
    • 但是事件是触发了10次的，响应的函数只触发了一次；

image.png

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

生活中防抖的例子：

  • 比如说有一天老师上完课，老问大家有什么问题来问老师，老师会等待五分钟的时间。
  • 如果在五分钟的时间内，没有同学问老师问题，那么就下课了；
    • 在此期间，a同学过来问问题，并且帮他解答，解答完后，老师会再次等待五分钟的时间看有没有其他同学问问题；
    • 如果老师等待超过了5分钟，就点击了下课（才真正执行这个时间）；
  • 生活中节流的例子：
  • 比如说有一天老师上完课，老师说大家有什么问题来问老师，但是在一个5分钟之内，不管有多少同学来问问题，老师只会解答一个问题；
  • 如果在解答完一个问题后，5分钟之后还没有同学问问题，那么就下课；

6.案例准备

  • 通过一个搜索框来延迟防抖函数的实现过程：
    • 监听input的输入，通过打印模拟网络请求
  • 测试发现快速输入一个macbook共发送了7次请求，显示我们需要对它进行防抖操作：
<input type="text" class="search">

<script>
    const search = document.querySelector('search')
    let counter = 0
    const inputChange = function(event) {
        console.log(`发送了第${++counter}次网络请求`, this, event)
    }
    
    seach.oninput = searchChage
</script>

image.png

7.Underscore库的介绍

  • 事实上我们可以通过一些第三方库来实现防抖操作：
    • lodash
    • underscore
  • 这里使用underscore
    • 我们可以理解成lodash是underscore的升级版，它更重量级，功能也更多；
    • 但是目前我看到underscore还在维护，lodash已经很久没有更新了；
  • Underscore的官网： underscorejs.org/
  • Underscore的安装有很多种方式：
    • 下载Underscore，本地引入；
    • 通过CDN直接引入；
    • 通过包管理工具（npm）管理安装；
  • 这里我们直接通过CDN：
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.1/underscore-umd-min.js"></script>

8.Underscore实现防抖和节流

<input type="text">

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

<script>
    const input = document.querySelector('input')
    let counter = 0
    const inputChange = function(event) {
        console.log(`发送了第${++counter}次网络请求`, this, event)
    }


    // 防抖处理
    input.oninput = _.debounce(inputChange, 2000)
    input.oninput = debounce(inputChange, 2000)


    // 节流处理
    input.oninput = _.throttle(inputChange, 2000)
avatar
文章
阅读
粉丝