JavaScript：节流Throttle与防抖Debounce

一、前言

在JavaScript中，通常需要用到一些事件，如：按钮的click事件、输入框的keydown事件、鼠标的mousemove事件、浏览器的resize事件等。这些事件都可能被高频触发，会不断的执行回调函数，从而导致资源浪费，影响前端性能。

优化高频执行函数的方法：JavaScript中的 节流(Throttle) 与 防抖(Debounce)。

性能优化原理：控制函数执行的频率, 从而减少不必要的资源消耗, 提高页面性能。

二、节流（Throttle）

1、定义
节流：指当事件被连续触发时，在设定的一段时间内，只执行一次该事件的回调函数；               也就是说，执行一次事件的回调函数后，等到间隔时间结束，若再触发该事件，才会再执行该事件的回调函数；                                                                                                                               将高频执行变成每隔一段时间执行；

【举个例子】：                                                                                                                               假设一个事件的间隔时间是3秒，当第一次触发了该事件，会执行该事件的回调函数，
 3秒间隔内，再触发该事件，并不会再执行该事件的回调函数；
 直到3秒钟过后，再触发该事件，才会再执行该事件的回调函数；
 

2、使用场景
（1）多次点击按钮                                                                                                                            当一个搜索按钮被连续多次点击时，并不是每次点击都发送请求，会存在一个间隔时间，距上次点击完获取数据后，间隔几秒钟，再点击才会重新请求加载数据；

（2）频繁下拉刷新                                                                                                                         同样的，当页面被频繁下拉刷新时，并不是每次下拉都发送请求重新加载数据，会存在一个间隔   时间，距上次刷新完几秒钟后，再下拉才会重新请求加载数据；

3、实现原理
利用定时器setTimeout设置间隔时间；                                                                                           每次执行事件的回调函数，都会添加一个新的定时器，到了设定时间再清除这个定时器；
通过判断定时器是否存在，即可得到设置的计时是否结束；
若定时器存在（未被清除），说明计时还未结束，本次不执行事件的回调函数；
若定时器不存在