认识防抖debounce函数

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

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

防抖函数的案例

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

基本实现防抖（面试）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <button>按钮</button>

  <input type="text">

  <script>
    function hydebounce (fn, delay) {
      // 1.用于记录上一次事件触发的timer
      let timer = null

      // 2.触发事件时执行的函数
      const _debounce = () => {
        // 2.1.如果有再次触发(更多次触发)事件, 那么取消上一次的事件
        if (timer) clearTimeout(timer)

        // 2.2.延迟去执行对应的fn函数(传入的回调函数)
        timer = setTimeout(() => {
          fn()
          timer = null // 执行过函数之后, 将timer重新置null
        }, delay);
      }

      // 返回一个新的函数
      return _debounce
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 3.自己实现的防抖
    let counter = 1
    inputEl.oninput = hydebounce(function () {
      console.log(`发送网络请求${counter++}`)
    }, 1000)

  </script>

</body>

</html>

认识节流throttle函数

  • 我们用一副图来理解一下节流的过程
    • 当事件触发时，会执行这个事件的响应函数；
    • 如果这个事件会被频繁触发，那么节流函数会按照一定的频率来执行函数；
    • 不管在这个中间有多少次触发这个事件，执行函数的频繁总是固定的；
  • 认识节流throttle函数 节流的应用场景：
    • 监听页面的滚动事件；
    • 鼠标移动事件；
    • 用户频繁点击按钮操作；
    • 游戏中的一些设计；

节流函数的应用场景

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

基本实现节流（面试）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<script>
    function hythrottle(fn, interval) {
      let startTime = 0

      const _throttle = function() {
        const nowTime = new Date().getTime()
        const waitTime = interval - (nowTime - startTime)
        if (waitTime <= 0) {
          fn()
          startTime = nowTime
        }
      }

      return _throttle
    }
  </script>

  <script>
    // 1.获取input元素
    const inputEl = document.querySelector("input")

    // 3.自己实现的节流函数
    let counter = 1
    inputEl.oninput = hythrottle(function() {
      console.log(`发送网络请求${counter++}:`, this.value)
    }, 1000)


  </script>