防抖和节流

防抖

特点： 多次触发,只执行最后一次

作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间防抖类似于英雄联盟回城 6 秒，如果回城中被打断，再次回城需要再等 6 秒

代码示例：

html

<body>
  <input type="text" id="inp" />
  <script>
    // 1.封装防抖函数
    function debounce(fn, time) {
      // 4.创建一个标记用来存放定时器的返回值
      let timeout = null
      return function () {
        // 5.每当用户触发input事件  把前一个 setTimeout 清楚掉
        clearTimeout(timeout)
        // 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
        timeout = setTimeout(() => {
          // 7.这里进行防抖的内容
          fn()
        }, time)
      }
    }

    // 2.获取inpt元素
    var inp = document.getElementById('inp')
    // 8. 测试防抖临时使用的函数
    function sayHi() {
      console.log('防抖成功')
    }
    // 3.给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件
    inp.addEventListener('input', debounce(sayHi, 5000))
  </script>
</body>

节流

特点： 规定时间内,只触发一次

作用： 高频率触发的事件,在指定的单位时间内，只响应第一次节流类似于英雄联盟里的英雄平 A 一定是内点击多次只进行攻击一次

代码示例：

html

<script>
  // 1.封装节流函数
  function throttle(fn, time) {
    //3. 通过闭包保存一个 "节流阀" 默认为false
    let temp = false
    return function () {
      //8.触发事件被调用 判断"节流阀" 是否为true  如果为true就直接trurn出去不做任何操作
      if (temp) {
        return
      } else {
        //4. 如果节流阀为false  立即将节流阀设置为true
        temp = true //节流阀设置为true
        //5.  开启定时器
        setTimeout(() => {
          //6. 将外部传入的函数的执行放在setTimeout中
          fn.apply(this, arguments)
          //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键)  表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉
          temp = false
        }, time)
      }
    }
  }
  function sayHi(e) {
    // 打印当前 document 的宽高
    console.log(e.target.innerWidth, e.target.innerHeight)
  }
  // 2.绑定事件，绑定时就调用节流函数
  // 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数
  window.addEventListener('resize', throttle(sayHi, 2000))
</script>

通过自定义指令实现

Vue.directive('throttle', {
  bind: (el, binding) => {
    let throttleTime = binding.value // 防抖时间
    if (!throttleTime) {
      // 用户若不设置防抖时间，则默认2s
      throttleTime = 2000
    }
    let cbFun
    el.addEventListener(
      'click',
      event => {
        if (!cbFun) {
          // 第一次执行
          cbFun = setTimeout(() => {
            cbFun = null
          }, throttleTime)
        } else {
          event && event.stopImmediatePropagation()
        }
      },
      true
    )
  },
})

个人见解

节流和防抖应该加在 UI 层面，而不是网络层面。

上面这句话具体什么意思？

以非 tab 形式的表单的点击搜索为例。

首先应该选用防抖方案，在一瞬间多次点击搜索，只发出一个请求。只对点击事件的回调函数执行间隔做限制，而不是直接对 axios 的网络请求发出做限制。

为什么要这么做？

如果你将防抖的功能加在了 axios 层面，那么你进行接口测试时，可能会让你对接口的响应时间造成误判，比如你将防抖时间设置成了 5 秒，而实际后端接口只需要 300 毫秒即可返回结果

有一种情况例外：领导就是让你这么干。

参考资料

防抖和节流（详细）使用场景和区别

event.stopImmediatePropagation

can i use:stopImmediatePropagation

【实战】Vue 自定义防抖指令

防抖和节流 #

防抖 #

节流 #

通过自定义指令实现 #

个人见解 #

参考资料 #

防抖和节流

防抖

节流

通过自定义指令实现

个人见解

参考资料