防抖是事件停止触发一段时间后执行最后一次回调，节流是在固定时间间隔内最多执行一次。防抖适用于搜索输入、resize等“操作结束后响应”场景；节流适用于滚动、鼠标移动等“需持续但限频响应”场景。
防抖（Debounce）和节流（Throttle）是 JavaScript 中处理高频事件的两种经典优化策略，核心目标都是减少函数实际执行次数，避免性能浪费或逻辑错误。它们的区别在于触发时机和执行频率的控制逻辑不同。
防抖：等“停”了再执行
防抖指在事件被频繁触发时，只执行最后一次触发后的回调。它会重置计时器，直到事件停止触发一段时间后才真正执行。适合用于搜索框输入、窗口大小调整后重新布局等场景——用户操作还没结束，就不着急响应。
实现要点：
– 每次触发都清除上一次的定时器
– 重新设置新的延时执行
– 可选支持立即执行（首次触发立刻运行，后续连续触发则仍按防抖逻辑）
基础防抖（非立即执行）：function debounce(func, wait) {
let timeout;
return function(…args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}带立即执行选项的防抖：function debounce(func, wait, immediate = false) {
let timeout;
return function(…args) {
if (immediate && !timeout) {
func.apply(this, args);
}
clearTimeout(timeout);
timeout = setTimeout(() => {
if (!immediate) {
func.apply(this, args);
}
timeout = null;
}, wait);
};
}
节流：固定节奏执行
节流指在指定时间间隔内，最多执行一次函数。即使事件持续触发，也保证函数以稳定频率运行。适合鼠标移动、滚动监听、游戏帧更新等需要持续反馈但不必每帧都处理的场景。
实现方式主要有两种：
– 定时器节流（推荐）：用定时器控制下一次可执行时机
– 时间戳节流：记录上次执行时间，每次触发对比当前时间是否超过间隔
定时器节流（更稳定，避免漏掉最后一次）：function throttle(func, wait) {
let timeout = null;
return function(…args) {
if (!timeout) {
timeout = setTimeout(() => {
func.apply(this, args);
timeout = null;
}, wait);
}
};
}时间戳节流（简单，但可能丢失结尾触发）：function throttle(func, wait) {
let previous = 0;
return function(…args) {
const now = Date.now();
if (now – previous >= wait) {
func.apply(this, args);
previous = now;
}
};
}
怎么选？关键看业务需求
防抖适用于“等用户做完再说”的场景，比如：
– 输入框搜索建议（用户打完字再发请求）
– 窗口 resize 后重新计算布局（等拖拽结束再渲染）
节流适用于“必须持续响应但不能太密”的场景，比如：
– 滚动加载（每滚动一段距离检查是否触底）
– 鼠标跟随效果（限制绘制频率，防止卡顿）
– 游戏中的按键响应（避免连点过快导致逻辑异常）
实际应用小贴士
真实项目中要注意几点：
– 记得保存返回的防抖/节流函数引用，避免重复绑定造成多个闭包
– 在组件卸载或事件解绑前，清理定时器（尤其是防抖）防止内存泄漏
– 使用箭头函数时注意 this 绑定问题，建议统一用 func.apply(this, args)
– 现代开发中可借助 Lodash 的 _.debounce 和 _.throttle，它们已处理了取消、取消后恢复、最大等待时间等边界情况
以上就是javascript的防抖和节流是什么_如何实现并应用它们的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1543907.html
微信扫一扫 
支付宝扫一扫 
