在现代前端开发中，防抖（Debounce）和节流（Throttle）是两种非常重要的性能优化技术。它们通过限制事件触发频率来减少不必要的计算开销，从而显著提升应用的性能和用户体验。本文将从概念、实现方式、应用场景以及实际代码示例等多个方面深入探讨防抖和节流的作用及其重要性。
一、什么是防抖与节流？
1.1 防抖（Debounce）
防抖是一种机制，用于确保某个函数只会在指定的时间间隔结束后执行一次。如果在该时间间隔内再次触发了相同的事件，则会重新计时，并忽略之前的触发操作。换句话说，防抖的核心思想是“延迟执行”，只有当事件停止触发一段时间后，才会真正执行目标函数。
防抖的核心特点：
- 延迟执行：在事件触发后的一段时间内等待，直到不再触发事件才执行。
- 减少冗余调用：避免频繁触发导致的性能问题。
防抖的应用场景：
- 搜索框输入提示：用户在输入文字时，通常需要等待用户输入完成后才发起请求。
- 窗口调整大小（
resize）：当用户调整浏览器窗口大小时，频繁触发的resize事件可能导致性能问题。 - 表单提交按钮：防止用户多次点击提交按钮，造成重复提交。
1.2 节流（Throttle）
节流是一种机制，用于确保某个函数在指定的时间间隔内最多只执行一次。无论事件触发了多少次，节流都会将其限制为固定频率的执行。换句话说，节流的核心思想是“固定频率执行”，确保事件处理不会过于频繁。
节流的核心特点：
- 固定频率：在一定时间内只允许执行一次。
- 平滑体验：保证事件响应的连续性，同时避免性能问题。
节流的应用场景：
- 滚动事件（
scroll）：当用户滚动页面时，频繁触发的scroll事件可能导致性能下降。 - 鼠标移动事件（
mousemove）：当用户移动鼠标时，频繁触发的事件可能会占用大量资源。 - 持续触发的按钮点击：如游戏中的按键触发或长按按钮。
二、手写防抖与节流
在我们面试的时候，经常会碰到面试官要求我们手写一个防抖和节流函数，接下来我们一起把他稳稳拿下。
函数防抖的实现：
// 函数防抖的实现
function debounce(fn, wait) {
let timer = null;
return function() {
let context = this,
args = arguments;
// 如果此时存在定时器的话，则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}
// 设置定时器，使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}
函数节流的实现：
// 函数节流的实现;
function throttle(fn, delay) {
let curTime = Date.now();
return function() {
let context = this,
args = arguments,
nowTime = Date.now();
// 如果两次时间间隔超过了指定时间，则执行函数。
if (nowTime - curTime >= delay) {
curTime = Date.now();
return fn.apply(context, args);
}
};
}
三、工具库支持
除了手动实现防抖和节流外，许多流行的 JavaScript 工具库（如 Lodash 和 Underscore.js）已经提供了内置的防抖和节流方法，方便在实际业务开发中供开发者直接使用。
3.1 Lodash 的防抖与节流
Lodash 提供了 _.debounce 和 _.throttle 方法，使用起来非常简单。
使用 Lodash 实现防抖
const _ = require('lodash');
const handleSearch = _.debounce((query) => {
console.log('正在搜索:', query);
}, 500);
document.getElementById('search-input').addEventListener('input', (event) => {
handleSearch(event.target.value);
});
使用 Lodash 实现节流
const _ = require('lodash');
window.addEventListener('scroll', _.throttle(() => {
console.log('页面正在滚动');
}, 200));
四、总结
防抖和节流是前端开发中不可或缺的性能优化技术。通过合理使用这两种技术，开发者可以有效减少不必要的计算开销，提升应用的性能和用户体验。无论是搜索框输入提示、窗口调整大小，还是滚动事件和鼠标移动事件，都可以通过防抖和节流来优化，对于函数内部的逻辑实现其实非常简单，如果有问题可以在评论区进行沟通交流。
