防抖与节流，看了些博客以及大厂的面试题，为一个高频考点。先对其做个总结，再将它写入实际上的目前在做的项目之中。

首先，为什么要使用防抖函数？

举一个实例来说，比如我们在某个搜索框中，比如我们想要搜索“apple”：

当我们输入a的时候，为了更好的用户体验，通常会出现对应的联想内容，这些联想内容通常是保存在服务器的，所以需要一次网络请求；

当继续输入ap的时候，再次发送网络请求；

那么apple总共需要发出5次网络请求，这会大大地损耗整个系统的性能，无论是对前端的事件处理或是对于服务器的压力。实际上，我们不需要这么多次的网络请求，正确的做法应该是，在合适的情况下再去发送网络请求。

比如说，如果用户快速的输入“apple”，那么只是发送一次网络请求，如果用户是输入a后想了一会儿，那这个时候a确实应该发送一次网络请求。简而言之，就是应该监听用户在某个时间段内，没有再次触发时，再去发送网络请求。

防抖的操作即为，只有在某个时间内，没有再次触发某个函数时，才真正的调用这个函数。

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

防抖的应用场景还是很多的，比如：

1.输入框中频繁地输入内容，搜索或者提交信息。

2.频繁地点击按钮，触发某个事件。

3.监听浏览器滚动事件，完成某些特定操作。

4.用户缩放浏览器地resize事件。

 

那么，节流是怎样呢？

预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。节流的操作即为，在某个时间内，某个函数只能被触发一次。

节流的应用场景为：

1.监听页面的滚动事件。

2.鼠标移动事件。

3.用户频繁点击按钮操作。

4.游戏中的一些设计。

总而言之，依然是密集的事件触发，然而相比于防抖函数，节流不会等待最后一次才去进行函数调用，而是会按照一定的频率进行调用。

本次项目中，使用到了防抖函数，因为之前，我们监听goodsitem的时候，使用事件总线的时候，在home.vue中执行了：

mounted() {
    //3.监听item中图片加载完成
    this.$bus.$on("itemimageload",()=>{this.$refs.scroll.refresh()
    })
  }

由于主页面需要加载的商品页面比较多，频繁调用对性能无好处。因此，我在这里使用了一个防抖函数。防抖的话，我先把它封装了，代码如下：

export function debounce(func,delay){
  let timer = null
  return function (...args){
    if (timer) clearTimeout(timer)
    timer = setTimeout(()=>{
      func.apply(this,args)
    },delay)
  }
}

下面我们来，解析下上述的防抖函数。其核心思路如下：

1.当触发一个函数时，并不会立即执行这个函数，而是会延迟（通过定时器来延迟函数的执行）。

2.如果在延迟时间内，又重新触发函数，那么取消上一次的函数执行，即取消定时器。

3.如果在延迟时间内，没有重新触发函数，那么这个函数就会正常执行（执行传入的函数）。

将思路转成代码即可：

定义debounce函数要求传入两个函数：需要处理的函数func以及延迟时间。

通过定时器来延迟传入函数func的执行，如果在此期间有再次触发这个函数，那么clearTimeout取消这个定时器，如果没有触发，那么在定时器的回调函数中执行即可。

那么，接下来我们可以改动在home.vue中的代码啦~

先导入debounce函数，

import {debounce} from "../../src/components/common/utils/utils";

之后再改动mounted：

mounted() {
    const refresh = debounce(this.$refs.scroll.refresh, 200)
    this.$bus.$on("itemimageload", () => {
      refresh()
    })
  }