「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」

防抖节流

介绍

防抖节流 ，这里主要指的是 js 函数的防抖 和 节流 操作。

防抖节流，这是项目中用到的最多的 js 的方法之一。

场景

函数的 防抖 和 节流，在实际项目中的应用方面有很多。

例如：我们在请求后端数据时，正常来说某个按钮，只需要点击一次，执行一次请求，就能够得到我们想要的数据，然后等待页面发生变化。

但问题就处在，请求数据到页面发生变化，这期间内。假如这段时间，由于网络原因或者代码执行方面，导致页面在等待很久之后才会发生变化。那么就会导致这段时间，用户并不知道页面发生了什么事情，而会一直进行点击操作，那么就会一直进行请求后端。就会导致服务器压力变大，也会增加了很多不必要的未知的问题出现。

所以这里 防抖 和 节流的出现，就会避免这种情况的发生

防抖

这里用网上比较好理解的话来讲。就是 防抖 类似于 游戏中英雄的 回城，假如在倒计时之内被打断，那么再次回城，就需要重新计时。

例如 搜索框搜索东西，只有输入完后，等待多少秒，没有其它操作后，才会触发接下来的功能。

防抖函数 需要传递两个参数，一个是需要执行的函数，另一个是防抖时间。

    function debounce(fn, wait) {
      let timer = null
      function debounceFunc() {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          // fn()
          fn.call(this)
        }, wait)
      }
      return debounceFunc
    }

节流

节流 就是类似 技能冷却，在某一段时间内，只能触发一次，触发后重新进入冷却时间，这就是节流。

减少一段时间内，触发的频率。

例如 按钮不断点击，但是只在单位时间后，才会触发一次。单位时间内的多次触发，都不起效。

节流函数 一样，也是需要传递两个参数，一个是需要执行的函数，另一个是节流所需的时间。

    function throttle(fn, wait) {
      let timer = true
      function throttleFunc() {
        if (timer) {
          setTimeout(() => {
            // fn()
            fn.call(this)
            timer = true
          }, wait)
        }
        timer = false
      }
    }

总结

防抖节流 简单概括

防抖 --> 回城 ---> 搜索框

节流 --> 技能冷却 ---> 按钮点击