前端开发中的防抖与节流
在前端开发的世界里，防抖（debounce）和节流（throttle）是两个非常重要的概念，它们能够帮助我们更好地处理频繁触发的事件，提升用户体验和系统性能。
一、防抖（debounce）
- 概念解析
- 防抖，顾名思义，防止抖动。就像我们敲键盘时，不能把一次敲击误认为多次输入。在前端开发中，防抖主要是为了避免事件被误触发多次。例如，在登录、发短信等场景中，如果用户点击按钮太快，可能会发送多次请求，这时候就需要使用防抖来确保只发送一次请求。
- 代码实现重在清零
clearTimeout。可以把防抖比作等电梯，只要有一个人进来，就需要再等一会儿。
以下是一个简单的防抖函数示例代码：
function debounce(f, wait) {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => {f(...args);}, wait);};
}
- 应用场景
- 避免按钮重复点击：在登录、发短信等按钮的点击事件中，使用防抖可以防止用户点击太快导致发送多次请求。
- 调整浏览器窗口大小：当调整浏览器窗口大小时，
resize事件会频繁触发，造成过多的计算。使用防抖可以确保在用户停止调整窗口大小后，只进行一次计算。 - 文本编辑器实时保存：当文本编辑器无任何更改操作一秒后进行保存，可以使用防抖来避免频繁保存，提高性能。
二、节流（throttle）
- 概念解析
- 节流，顾名思义，控制水的流量。在前端开发中，节流是控制事件发生的频率，比如控制为 1 秒发生一次，甚至 1 分钟发生一次。它与服务端的限流（Rate Limit）类似。
- 代码实现重在开锁关锁
timer = timeout; timer = null。可以把节流比作过红绿灯，每等一个红灯时间就可以过一批。
以下是一个简单的节流函数示例代码：
function throttle(f, wait) {let timer;return (...args) => {if (timer) {return;}timer = setTimeout(() => {f(...args);timer = null;}, wait);};
}
- 应用场景
scroll事件：在页面滚动时，每隔一秒计算一次位置信息等，可以使用节流来减少计算量，提高性能。- 浏览器播放事件：在浏览器播放视频时，每隔一秒计算一次进度信息等，可以使用节流来避免频繁计算。
input框实时搜索：在input框实时搜索并发送请求展示下拉列表时，可以每隔一秒发送一次请求，既可以使用防抖，也可以使用节流。
总之，防抖和节流在前端开发中有着广泛的应用，它们可以帮助我们优化性能，提升用户体验。在实际开发中，我们可以根据具体的需求选择合适的方法来处理频繁触发的事件。