防抖和节流

在前端开发过程中，我们经常需要绑定一些持续触发事件，如：resize、scroll、mousemove等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁的去执行函数。

通常这种情况下，我们怎么去解决呢？一般来讲，防抖和节流是比较好的解决方案。

一、函数的防抖

1、什么是函数防抖

函数防抖（debounce）:就是让某个函数在上一次执行之后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发函数，等待时间可以重新计算，知道该函数在一定间隔内没有被调用时，才开始执行被调用方法（所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。）

2、应用场景

用户注册时候的手机号验证和邮箱验证

搜索框

3、通用写法

去抖案例
4.举例

应用场景：假设我们网站有个所搜框，用户输入文本我们会自动联想匹配出一些结果供用户选择。

我们可能首先想到到的做法就是监听keypress事件，然后异步去查询结果

这个方法本事是没有错的，但是如果用户快速的输入一连串字符，假设是10个字符，就会在瞬间触发了10次请求，这无疑不是我们想要的。

我们想要的是用户停止输入的时候才去触发查询的请求，这个时候函数防抖可以帮助我们。

二、函数节流

1、什么是函数节流

函数节流（throttle）:是让一个函数无法在很短的时间间隔内连续调用，当上一次执行完之后过了规定的时间间隔，才能进行下一次的函数调用。（所谓节流，就是指连续触发事件但是在N秒中只执行一次函数）节流会稀释函数的执行频率。

即每间隔某个事件去执行某个函数，避免函数的过多执行，这个方式就叫函数节流

2、应用场景

window对象的resize、scroll事件

拖拽时候的mousemove

射击游戏中的mousedown、keydown事件

文字输入、自动完成的keyup事件

3、通用写法

4、举例说明

应用场景：滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的接口查询内容的时候

同样的，如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用。

但是这次的情况跟上面的有所不同，我们不是要在每次完成等待某个时间之后才执行函数，而是要每间隔某个时间去执行某个函数，避免函数的过多执行