本文探讨了JavaScript中的防抖和节流技术，它们在控制事件频繁触发时的回调执行上起到关键作用。防抖用于防止多次触发，如表单提交和输入验证，而节流则适用于需要按时间间隔均匀执行的场景，如游戏刷新、DOM拖拽和Canvas。文中以SpringBoot电商项目mall4j为例，展示了这些技术的实际应用。
JS的防抖与节流
springboot实战电商项目mall4j （https://gitee.com/gz-yami/mall4j）
什么是防抖？
函数防抖(debounce)： 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
什么是节流
**函数节流(throttle): **规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
应用场景
对于函数防抖，有以下几种应用场景：
- 给按钮加函数防抖防止表单多次提交。
- 对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
总的来说，适合多次事件一次响应的情况
对于函数节流，有如下几个场景：
- 游戏中的刷新率
- DOM元素拖拽
- Canvas画笔功能
总的来说，适合大量事件按时间做平均分配触发。
函数防抖
最低0.47元/天 解锁文章
扫一扫
1596
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
