函数防抖和函数节流

无论是从网站的性能还是易用性方面，函数防抖和函数节流都是我们学习前端绕不开的内容，一些大厂的面试也经常会问到，下面我们就结合实例来看一下。

函数防抖是只执行一段时间后的最后一次，函数节流就是相隔固定的时间去执行，属于限制流量，他们的作用都是限制高频触发的事件。

函数防抖

1.什么是函数防抖

        要弄清函数防抖，我们就要知道函数为什么会抖，比如：有一个输入框，当我们每次输入数据的时候，就会触发change函数，继而会触发一系列的逻辑操作，这个还没什么，要是每次change都触发了接口，那就会大大降低网站的性能，消耗服务器的资源，在短时间内重复触发函数这种场景就是函数抖动。

        那么函数防抖就出现了，原理也很好理解：设置一个固定的时间延迟，时间到了之后去触发动作，如果在这个时间点内再次出发，则重新计时，这样就避免了，重复触发逻辑的问题；

2.使用场景

在页面画一个输入框，并且在短时间内不停触发input框的oninput方法，代码及控制台如下所示，我们看到当我们输入短时间输入1234的时候，控制台打印了四次，也就是每次输入都会打印内容；

如果可以在比如300ms内，也就是极快的时间内不再打印，那么我们就解决了这个函数抖动；

我们可以设计一个定时器：300ms的延迟执行打印动作（逻辑函数）

1）初始化定时器为空；

2）判断如果计时器有数据，那么意味这上一次的动作未结束，那么就清除这个定时器，则下一次点击会重新走这个函数，也就是重新计时；

3）如果没有则执行逻辑函数；
具体代码如下，从控制台我们就能看到短时间多次触发，只会打印一次结果，这样就实现了函数防抖

函数节流

1.什么是函数节流

函数节流就是在某个时间内只触发一次函数，使用它的目的并不是为了避免重复触发，而是在某个时间段内限制流量，也就是触发的次数，方法还是计入定时器setTimeout，但是原理不同：设置一个定时器是延迟执行函数，如果定时器在某个时间段内没有再次触发，则将这个定时器置空，外层再加判断，如果定时器不存在（这就意味着顺利执行完了一次并且没有重复触发这个函数），则继续向下执行，等于就是给这个函数的执行在时间上限了流。

2.使用场景

最常见的使用场景有：mousemove ,mousehover 鼠标移入事件，还有下拉条下拉加载等，我们从页面的鼠标滚动事件onscroll来看一下，我们写一个0循环到99的列表，并且执行js的scroll事件，结果及代码如下所示：

我们看到结果执行了90次，这种情况可能我们会想这有什么用呢，那么我们想一下这种情况：下拉家在数据，就是每次执行一次下拉动作就会请求接口，如果是这样每次都去请求数据，如果多次触发则就会浪费资源，如果我们多次滚动，它能有规律的更新就好了，对，这就是函数节流：

1）我们设置一个定时器；

2）然后这个定时器赋值为一个延迟执行函数，事件为500ms；

3）500ms后执行逻辑代码并将定时器置空；

4）如果在500ms内重复触发了scroll函数，则这回事总情况下，定时器还没被清除掉，那么我们就在外层判断一下，定时器不存在则继续执行（执行完了整个过程）；

如上就实现了函数节流,，就是给多次触发的函数一个时间段内的固定流量，代码及结果如下所示，在同样是滚动加载，这里只执行了6次，大大提高了性能：

区别

通过函数防抖和节流我们可以比较出，函数防抖是为了防止多次触发逻辑代码，在某个时间段内它只执行最后一次的触发效果，而函数节流就是为了多次触发而生，首次会执行，避免一定时间内再次执行，超过这个时间触发会继续执行，两种优化手段有很多的使用场景，合理使用，可以大大提高网站性能。