防抖与节流

防抖与节流

1防抖

在进行窗口的 resize、scroll、输出框内容校验等操作的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖 (debounce) 和节流throtle) 的方式来到达这种效果，减少调用的频率

函数防抖是指当一个动作连续触发，只执行最后一次。好比我们打英雄联盟或者王者荣的时候，比如你按下了回城键，那么在 8秒钟之后，就会执行回城事件，但如果你再次按下回城键，那么回城时间又将重新计时，需要再等 8 秒才会执行回城事件。

函数节流是指一定时间内 s 方法只跑一次。好比我们打英雄联盟或者王者荣耀的时候，释放技能都有一段冷却时间，比如 技能有 5秒的冷却时间，那么我们在5秒钟的时间内只能释放一次 Q 技能。

例如，都设置时间频率为 500ms，在2 秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s 后，只会执行一次。

1.1什么是防抖

官方解释:当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

一定在事件触发n 秒后才执行，如果在一个事件触发的n 秒内又触发了这个事件，以新的事件的时间为准，n 秒后才执行，等触发事件n秒内不再触发事件才执行。

1.2防抖Debounce情景

有些场景事件触发的频率过高 (mousemove、onkeydown、onkeyup、onscroll)。

。回调函数执行的频率过高也会有卡顿现象，可以一段时间过后进行触发去除无用操作.

1.3防抖的实现

1.声明一个全部变量存储定时器ID。

2.每一次触发交互的时候，先清除上一次的定时器，然后开启本次定时器

2节流

2.1节流的概念

官方解释:当持续触发事件时，保证一定时间段内只调用一次事件处理函数如果持续触发事件，每隔一段时间只执行一次函数

2.2节流Throttle 情景

scroll 事件，每隔一秒计算一次位置信息等

比如我们常见的谷歌搜索框的联想功能

监听浏览器的滚动加载事件。

高频鼠标点击事件(也可做防抖)。

拖拽动画。

*2.3节流的实现

1声明一个全局变量存储触发事件

2.每一次触发事件，获取当前时间。

3判断当前时间与上一次触发事件，是否超过了间隔

4.如果超过间隔时间，则执行事件处理代码，然后存储本次触发的时间。

3防抖与节流的区别

相同点：

都可以通过使用 setTimeout 实现

目的都是，降低回调执行频率。节省计算资源

不同点：

函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能

函数防抖关注一定时间连续触发的事件，只在最后执行一次，而函数节流一段时间内只执行一次

例如，都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次