在Web开发中,防抖(Debouncing)和节流(Throttling)是两种常用的优化技术,用于提高页面性能和用户体验。它们通过限制函数执行的频率来减少计算资源的消耗,尤其是在处理频繁触发的事件时,如窗口大小调整、滚动、键盘输入等。
1、防抖(Debouncing)
防抖技术的核心思想是在事件频繁触发的情况下,只有在事件触发的一段时间后没有再次触发事件时,才执行目标函数。如果在这段时间内事件再次被触发,则重新计时。
1.1、应用场景
- 输入框实时搜索优化
- 窗口大小调整(resize)事件处理
- 按钮提交事件(防止多次点击)
1.2、实现示例
const debounce = (func, wait) => {let timeout;return function() {const context = this;const args = arguments;clearTimeout(timeout)