JavaScript大前端算法
深入理解前端防抖与节流：原理、区别与实战示例
前端高频事件优化技术，包括防抖（Debounce）和节流（Throttle）。阐述了两者核心思想：防抖为延迟执行且重置计时器，适用于搜索框输入；节流为固定间隔执行，适用于滚动监听。提供了原生 JavaScript 实现代码及 Lodash 库的调用方式，并结合 Vue 框架展示了实际应用场景。通过对比表格总结差异，帮助开发者根据场景选择合适方案以提升页面性能。
前端高频事件优化技术，包括防抖（Debounce）和节流（Throttle）。阐述了两者核心思想：防抖为延迟执行且重置计时器，适用于搜索框输入；节流为固定间隔执行，适用于滚动监听。提供了原生 JavaScript 实现代码及 Lodash 库的调用方式，并结合 Vue 框架展示了实际应用场景。通过对比表格总结差异，帮助开发者根据场景选择合适方案以提升页面性能。
在前端开发中，我们经常需要处理高频事件（如输入框输入、滚动、窗口调整大小等）。如果不加限制，浏览器会频繁触发回调函数，导致性能问题，甚至页面卡顿。
防抖（Debounce）和节流（Throttle）是两种优化方案，可以有效控制事件触发的频率，提高应用的性能和用户体验。
本文将详细解析防抖和节流的原理、适用场景及代码实现，帮助你更好地优化前端应用。
防抖是一种在事件触发后延迟执行的技术，如果在延迟期间事件被再次触发，计时器会重置，重新计算延迟时间。
核心思想：短时间内多次触发，只执行最后一次。
function debounce(fn, delay = 300) {
let timer;
return function (...args) {
if (timer) clearTimeout(timer); // 清除之前的定时器
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
示例：输入框防抖
<input type="text" id="search" placeholder="请输入内容">
<script>
const input = document.getElementById('search');
input.addEventListener('input', debounce((e) => {
console.log('搜索内容：', e.target.value);
}, 500));
</script>
效果：用户输入停止
500ms后，才触发console.log。
节流是一种限定函数执行频率的技术，即在一定时间间隔内，函数最多执行一次，即使事件被频繁触发。
核心思想：高频触发，固定间隔执行。
function throttle(fn, interval = 300) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
示例：滚动监听
<div style="height: 2000px;"></div>
<script>
window.addEventListener('scroll', throttle(() => {
console.log('滚动中...', new Date().toLocaleTimeString());
}, 1000));
</script>
效果：无论滚动多快，
scroll事件每秒最多执行一次。
| 防抖（Debounce） | 节流（Throttle） | |
|---|---|---|
| 触发方式 | 事件触发后延迟执行 | 事件触发后间隔执行 |
| 特性 | 短时间连续触发，只执行最后一次 | 固定时间间隔内最多执行一次 |
| 适用场景 | 输入框输入、搜索框、表单验证 | 滚动、鼠标移动、按钮点击 |
| 优势 | 避免无效调用，减少资源消耗 | 保证高频事件可执行，提高流畅度 |
| 实现方式 | setTimeout 延迟执行 | Date.now() 控制执行间隔 |
我们可以直接使用 Lodash 提供的 debounce 和 throttle 方法，避免自己实现。
npm install lodash
import _ from 'lodash';
const handleInput = _.debounce((e) => {
console.log('防抖触发：', e.target.value);
}, 500);
document.getElementById('search').addEventListener('input', handleInput);
const handleScroll = _.throttle(() => {
console.log('节流触发', new Date().toLocaleTimeString());
}, 1000);
window.addEventListener('scroll', handleScroll);
Lodash 优势：内部优化更好，支持立即执行（
leading）和延迟执行（trailing）。
<template>
<input v-model="searchText" @input="handleInput" placeholder="搜索">
</template>
<script>
import { ref } from 'vue';
import _ from 'lodash';
export default {
setup() {
const searchText = ref('');
const handleInput = _.debounce((e) => {
console.log('搜索关键词:', e.target.value);
}, 500);
return { searchText, handleInput };
},
};
</script>
效果：用户停止输入
500ms后才会触发搜索请求。
<template>
<button @click="handleClick">点击节流</button>
</template>
<script>
import _ from 'lodash';
export default {
setup() {
const handleClick = _.throttle(() => {
console.log('按钮点击', new Date().toLocaleTimeString());
}, 2000);
return { handleClick };
},
};
</script>
效果：按钮每
2s只能点击一次。
防抖（Debounce）和节流（Throttle）是前端性能优化的重要技术，合理使用可以显著减少不必要的计算，提高页面流畅度。
| 适用场景 | 推荐方法 |
|---|---|
| 输入框防止频繁请求 | ✅ 防抖（Debounce） |
| 窗口调整大小（resize） | ✅ 防抖（Debounce） |
| 滚动事件（scroll） | ✅ 节流（Throttle） |
| 鼠标移动（mousemove） | ✅ 节流（Throttle） |
| 按钮点击（click） | ✅ 节流（Throttle） |
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online