防抖和节流

1、为什么使用防抖和节流

比如在一些搜索功能上，可以有效减少服务器压力，减少频繁的DOM操作，资源不断加载或重新加载等行为，减少网站卡顿感。

2、防抖(debounce)

防抖就是把触发非常频繁的事件合并成一次执行，以免把一次的事件误认为多次，简单来说就是一定时间内只执行一次回调函数，如果在一定的时间内，又触发了该事件，那么回调函数的执行时间会在此刻重新计算，我们几乎每天都在用的搜索功能就是一个防抖，每次输入关键字服务器给予我们联想词就是一个身边的防抖。那么还有哪些常见的防抖的场景呢？

• 登录需要手机号登录的时候，避免用户重复点击发送验证码，发送多次请求
• 频繁的吊证浏览器大小，有时我们浏览器一个特定的大小，那么网站就要频繁的计算，那么需要防抖，只执行最后的运算就好了
• 用户输入账号密码需要登录也是需要的

实现原理 ：只要触发指定的事件，就会清除上一个定时器，又开始了一个新的计时器，直到停止触发一定的时间后，就会执行相应的回调函数。

下面是简单的逻辑代码

 

3、节流(throttle) 

节流的含义就是控制事件触发的频率，比如控制事件在5s执行一次或者10s执行一次，下面是一些使用场景

• 网站滚动事件
• 视频网站记录播放进度
• 搜索款输入后端并产生联想词(防抖和节流都可实现)

 实现原理：只要触发特定的事件，只会在当前计时器为空时，去注册一个计时器，只会在一定的时间间隔触发

下面是简单的逻辑代码

 

 4、区别

防抖是将多次执行转化为一次执行，节流是将将多次执行转化为每隔一段时间执行，通过上边的两段代码的逻辑中也可以看出来，防抖的函数只会在wait时间后执行一次，并且清除掉这个定时器，如果再次触发，就会重新注册一个定时器。而节流的函数在触发事件后，会注册一个定时器，在wait时间间隔执行一次回调函数。