函数防抖VS函数节流

Posted 2021-03-21 jianxian

（1）函数防抖debounce

函数触发停止一段时间后(期间不能再触发 debounce，否则将重新计时)，再执行回调函数

机制：

防抖函数主要利用定时器的延迟执行特性，根据是否有定时器在等待执行：

• 触发了一个事件后：如果有一个定时任务待执行，就清除定时器，重新计时。
• 如果没有任务待执行，就定时执行这个事件。

#应用场景：

1. 表单的连续点击，防止重复提交。比如重复发送一篇文章。
2. 类百度的搜索，连续输入等输入停止后再搜索。
3. 一直拖动浏览器窗口，只想触发一次事件等。

 

 

（2）函数节流throttle

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行(单位时间内有事件被多次触发则，只生效一次)。
节流函数根据时间差是否超过给定时间(gapTime)来决定是否触发回调。

应用场景：

1. 自动保存草稿功能，当用户在输入的时候(一直触发事件),单位时间内只保存一次草稿。
2. 游戏中的刷新率

 

 

（3）对比

作用和本质：

• 防抖函数和节流函数主要解决的问题是：防止函数”短时间“的重复执行。

• 它们本质上是：在时间轴上控制函数的执行次数。

#应用实例，需要加个括号：

因为返回debounce和throttle返回的是一个函数，所以如果不是自动执行的事件监听回调，我们应该再后面加个()，执行返回的闭包函数。

 

 

 

 

.