防抖指事件触发后延迟执行，期间若再次触发则重新计时，适用于搜索联想等场景；节流指固定时间间隔内只执行一次，保证周期性响应，适用于滚动加载等持续行为。两者均通过限制函数执行频率提升性能，区别在于防抖关注最后一次操作，节流注重规律执行。实际应用需注意this指向、首次执行配置及延迟时间合理性，合理封装可复用并优化用户体验与系统负载。
用户在输入框频繁输入时，会触发大量事件，比如搜索建议、表单验证等。如果不加以控制，这些高频触发的回调会导致页面卡顿、接口请求过多等问题。JavaScript中的防抖（Debounce）和节流（Throttle）是两种常用的优化手段，能有效减少函数执行次数，提升性能。
什么是防抖（Debounce）？
防抖的核心思想是：当事件被触发后，延迟一段时间再执行回调。如果在这段时间内事件再次被触发，则重新计时。
适用于：搜索框输入联想、窗口大小调整、按钮重复点击等场景。
常见实现方式：- 使用 setTimeout 和 clearTimeout 控制延迟执行
- 每次触发事件时清除上一次的定时器，重新开始计时
示例代码：
立即学习“Java免费学习笔记（深入）”；
function debounce(func, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => func.apply(this, args), delay);
};
}
// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function (e) {
console.log('搜索:', e.target.value);
}, 300));
什么是节流（Throttle）？
节流是指在一定时间间隔内，无论事件触发多少次，只执行一次回调。它不像防抖那样“重置”，而是固定频率执行。
适用于：滚动加载、鼠标移动监听、按钮提交防止重复提交等。
实现方式有两种主流思路：- 定时器方式： 设置定时器，在到达间隔时间后执行，并清空定时器
- 时间戳方式： 记录上次执行时间，每次触发时判断是否超过设定间隔
时间戳方式示例：
function throttle(func, delay) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= delay) {
func.apply(this, args);
lastTime = now;
}
};
}
// 使用示例
window.addEventListener('scroll', throttle(() => {
console.log('页面滚动中...');
}, 100));
防抖与节流的区别与选择
虽然两者都用于限制函数执行频率，但适用场景不同：
- 防抖更关注“最后一次”操作，适合用户输入结束后的响应
- 节流保证周期性执行，适合持续性行为如滚动、拖拽
- 输入框自动补全推荐用防抖；无限滚动加载更适合节流
实际应用中的注意事项
在真实项目中使用防抖节流时，还需注意以下几点：
- 确保 this 指向正确，使用 apply 或 bind 绑定上下文
- 考虑是否需要立即执行第一次（leading edge），可扩展函数支持配置项
- 避免在每次渲染时重新创建防抖函数，应将其缓存或定义在外部
- 结合业务逻辑设置合理的延迟时间，太短无效，太长影响体验
基本上就这些。掌握防抖和节流，不仅能提升用户体验，还能显著降低服务器压力和浏览器性能消耗。不复杂但容易忽略细节，写好一次封装就能反复使用。
