在前端开发的日常里，像监听窗口 resize、输入框实时搜索、按钮高频点击这类场景，简直不要太常见。可一旦处理不好，频繁触发的事件分分钟让页面卡顿、浏览器假死，甚至把服务器请求搞到崩溃，用户体验直接 “原地爆炸”！别急，JS 里的防抖和节流技术就是解决这些难题的 “秘密武器”，今天就带大家解锁 3 种超实用方案。

技术原理剖析

防抖（Debounce）：就像等电梯关门，你一直按关门按钮，电梯不会立刻关门，而是等你一段时间不按了，才执行关门动作。在代码里，防抖就是当事件被频繁触发时，设定一个延迟时间，只有在延迟时间内事件不再触发，才执行对应函数。

节流（Throttle）：好比过独木桥，一次只允许一个人通过，规定好间隔时间。在代码中，节流是指在一定时间间隔内，无论事件触发多少次，都只执行一次函数，以此控制函数执行频率。

代码示例详解

方案一：普通防抖函数

// 创建一个防抖函数，接收要执行的函数和延迟时间
function debounce(func, delay) {
let timer;
return function() {
// 每次触发事件时，清除之前的定时器
if (timer) {
clearTimeout(timer);
}
// 设置新的定时器，延迟delay毫秒后执行func函数
timer = setTimeout(() => {
func.apply(this, arguments);
}, delay);
};
}
// 使用示例：监听窗口resize事件
window.addEventListener('resize', debounce(() => {
console.log('窗口大小改变，执行相关操作');
}, 300));

方案二：普通节流函数

// 创建一个节流函数，接收要执行的函数和时间间隔
function throttle(func, limit) {
let inThrottle;
return function() {
// 如果当前处于节流状态（inThrottle为true），则直接返回，不执行函数
if (inThrottle) return;
// 执行函数
func.apply(this, arguments);
// 设置为节流状态
inThrottle = true;
// 延迟limit毫秒后，将inThrottle设置为false，允许下次函数执行
setTimeout(() => {
inThrottle = false;
}, limit);
};
}
// 使用示例：监听滚动事件
window.addEventListener('scroll', throttle(() => {
console.log('页面滚动，执行相关操作');
}, 200));

方案三：lodash 库的防抖节流

// 引入lodash库
const _ = require('lodash');
// 使用lodash的防抖函数，延迟300毫秒
const debouncedFunc = _.debounce(() => {
console.log('lodash防抖函数执行');
}, 300);
// 使用lodash的节流函数，间隔200毫秒
const throttledFunc = _.throttle(() => {
console.log('lodash节流函数执行');
}, 200);

对比效果实测

在模拟高频触发场景下，未处理的事件触发 100 次时，页面卡顿明显；使用普通防抖函数，在延迟 300ms 后，事件触发次数减少到 1 - 2 次；普通节流函数将事件触发频率限制在每 200ms 一次；lodash 库的防抖节流不仅代码简洁，性能表现也十分稳定，在复杂项目中优势更明显。

扩展思考

防抖和节流在实际项目中的应用远不止这些，比如在移动端的 touchmove 事件处理、游戏开发的动画渲染频率控制中都大有用处。而且在 React、Vue 等框架里，使用防抖节流又有哪些最佳实践？当项目对性能要求极高时，是选择手写还是使用第三方库更合适？

是手写防抖节流更能掌控细节，还是直接用 lodash 这类库更香？大伙在项目里都咋用的？快来评论区分享你的实战经验，咱们好好唠唠！