(1)函数防抖 debounce
函数触发停止一段时间后(期间不能再触发 debounce, 否则将重新计时), 再执行回调函数
机制:
防抖函数主要利用定时器的延迟执行特性, 根据是否有定时器在等待执行:
触发了一个事件后: 如果有一个定时任务待执行, 就清除定时器, 重新计时.
如果没有任务待执行, 就定时执行这个事件.
应用场景:
表单的连续点击, 防止重复提交. 比如重复发送一篇文章.
类百度的搜索, 连续输入等输入停止后再搜索.
一直拖动浏览器窗口, 只想触发一次事件等.
(2)函数节流 throttle
规定一个单位时间, 在这个单位时间内, 只能有一次触发事件的回调函数执行(单位时间内有事件被多次触发则, 只生效一次).
节流函数根据时间差是否超过给定时间 (gapTime) 来决定是否触发回调.
应用场景:
自动保存草稿功能, 当用户在输入的时候(一直触发事件), 单位时间内只保存一次草稿.
游戏中的刷新率
(3)对比
作用和本质:
防抖函数和节流函数主要解决的问题是: 防止函数 "短时间" 的重复执行.
它们本质上是: 在时间轴上控制函数的执行次数.
应用实例, 需要加个括号:
因为返回 debounce 和 throttle 返回的是一个函数, 所以如果不是自动执行的事件监听回调, 我们应该再后面加个(), 执行返回的闭包函数.
.
来源: http://www.bubuko.com/infodetail-3344284.html