防抖和节流详解，掌握前端性能优化利器
🎯 引言
防抖和节流是前端性能优化中常用的技术手段，尤其在处理用户频繁触发的事件（比如滚动、输入、窗口缩放）时非常有用。掌握它们后，你可以轻松避免浏览器卡顿，提升用户体验，让页面交互更加流畅。
⚡ 什么是防抖？
简单来说，防抖（debounce）就是让某个函数在连续触发事件的“最后一次”触发后，延迟执行，避免频繁调用。
想象一下你在搜索框里输入内容，每敲一个字都会触发搜索请求。如果没有防抖机制，浏览器会发送大量请求，性能和体验都很糟糕。防抖的作用就像是“等待用户停止输入后再执行一次”。
防抖的生活例子
假设你在跟朋友讲话，但朋友说话总是断断续续、欲言又止。你决定：只有在他停下来超过 3 秒后，才开口回应他。这就是防抖：等输入稳定下来，再执行操作，避免中途误触发。
防抖代码示例
<input id="search" type="text" placeholder="请输入搜索内容" />
<script>
let timer = null;
function search() {
const val = document.getElementById('search').value;
console.log('搜索内容:', val);
}
document.getElementById('search').addEventListener('input', function () {
clearTimeout(timer);
timer = setTimeout(search, 500);
});
</script>
⏳ 什么是节流？
节流（throttle）是指规定一个时间间隔，在这个间隔内无论事件触发多少次，函数只执行一次。
比如页面滚动事件非常频繁，如果每次滚动都触发函数，性能损耗大。节流让函数最多每隔一定时间执行一次，保证既能响应事件，又不会执行过于频繁。
节流的生活例子
例如在高峰时段，机场安检入口处设置了一道自动闸机，每分钟只放行 20人（而不是让所有人同时涌入）。安检通道不会瞬间超载，工作人员能有序检查。这种也是节流的一个场景。
节流代码示例
在一定时间内只允许执行一次操作，例如获取验证码，规定 60 秒内只能获取一次。
var canSend = true;
function sendCode() {
if (!canSend) {
return;
}
canSend = false;
console.log('验证码已发送');
setTimeout(function () {
canSend = true;
}, 60000); // 60秒后允许再次发送
}
var btn = document.getElementById('sendCodeBtn');
btn.addEventListener('click', sendCode);
🔍 防抖和节流的区别
防抖和节流都能限制函数调用频率，但原理和适用场景不同：
- 防抖等待事件停止触发后执行，适合输入、搜索、按钮防连点。
- 节流按固定间隔执行，适合滚动、窗口缩放等持续触发的事件。
用生活比喻就是，防抖像是在说“你停一会儿我再行动”，节流像是说“我每隔一段时间就行动一次”。
🌟 前端项目中的常见应用场景
- 防抖
- 输入框防止频繁触发搜索请求。
- 表单验证防止重复提交。
- 按钮防止用户快速多次点击。
- 节流
- 页面滚动监听，加载更多数据。
- 浏览器窗口大小调整，延迟布局计算。
- 连续触发的动画或事件控制。
🧾 小节总结
- 防抖是让函数在事件停止触发后才执行，避免多次触发。
- 节流是限制函数执行频率，保证函数在一定时间间隔内只执行一次。
- 两者都是常用的性能优化手段，适用场景不同，合理选择可以大幅提升页面流畅度。
❓ 知识问答（Q&A）
Q：防抖和节流能同时使用吗？
A：可以，但一般针对不同的事件选择其一。某些复杂场景也可以组合使用。
Q：防抖时间和节流时间如何设置？
A：根据具体业务需求和用户体验调节，一般防抖时间设置500ms左右，节流时间设置在200ms到1000ms。
Q：是否所有频繁事件都需要防抖或节流？
A：不一定，只有事件处理函数开销大或频繁触发明显影响性能时才需要。
🧪 小练习
- 在输入框中实现防抖功能，当用户停止输入1秒后，控制台打印当前输入的值。
<input id="inputBox" type="text" placeholder="请输入内容" />
<script>
// 在这里实现防抖函数，并绑定事件
</script>
- 创建一个输入框，监听用户的 input 事件，并使用节流控制输入事件的触发频率，保证输入事件回调每 300 毫秒执行一次，避免频繁触发。
<input type="text" id="textInput" placeholder="输入内容试试..." />
<script>
// 在这里实现节流函数，并绑定输入事件
</script>
🎉 恭喜你已经掌握 防抖、节流 和 事件性能优化 技能啦！继续练习，你会写出更流畅的前端页面！