对节流与防抖的理解

类别：js / 日期：2023-01-11 / 浏览：278 / 评论：0

函数防抖是指在事件被触发 n 秒后再执行回调，如果在这 n 秒内事 件又被触发，则重新计时。这可以使用在一些点击请求的事件上，避 免因为用户的多次点击向后端发送多次请求。

函数节流是指规定一个单位时间，在这个单位时间内，只能有一次触 发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次， 只有一次能生效。节流可以使用在 scroll 函数的事件监听上，通过 事件节流来降低事件调用的频率。

防抖函数的应用场景：

按钮提交场景：防⽌多次提交按钮，只执⾏最后提交的⼀次 

服务端验证场景：表单验证需要服务端配合，只执⾏⼀段连续的输⼊ 事 件 的 最 后 ⼀ 次 ， 还 有 搜 索 联 想 词 功 能 类 似 ⽣ 存 环 境 请 ⽤ lodash.debounce

节流函数的适⽤场景： 

拖拽场景：固定时间内只执⾏⼀次，防⽌超⾼频次触发位置变动 

缩放场景：监控浏览器 resize 

动画场景：避免短时间内多次触发动画引起性能问题