防抖用于“回到顶部”按钮显隐控制，确保用户停止滚动后才执行一次判断；它通过清除前次定时器、仅在延迟后执行终态逻辑，避免高频触发导致的性能浪费。
在“回到顶部”按钮的显隐控制中，直接监听 scroll 事件会导致函数高频触发（每秒可达数十次），造成性能浪费甚至卡顿。防抖不是用来“延迟显示按钮”，而是防止滚动过程中反复计算和操作 DOM——它确保：只有用户**停止滚动一段时间后**，才执行一次显隐判断逻辑。
为什么滚动显隐需要防抖
不加防抖时，哪怕轻微滚动，onscroll 或 addEventListener('scroll') 就可能连续触发十几次。每次都要读取 scrollY、比较阈值、修改按钮 display 或 class，这些操作虽小，但叠加频繁会拖慢主线程，尤其在低端设备或复杂页面中明显。防抖把“多次判断”压缩为“一次终态判断”，更合理也更轻量。
防抖函数的标准写法（带 this 和参数支持）
使用闭包保存定时器引用，确保每次新触发都清除旧计时：
function debounce(fn, delay) {
let timer;
return function (...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
立即学习“Java免费学习笔记（深入）”；
这个版本兼容箭头函数外的普通调用，能正确传递 this 和参数，适合绑定到事件监听中。
如何集成到回到顶部按钮逻辑中
把原本直写的 scroll 处理逻辑，包装进防抖函数再绑定：
- 定义按钮元素：
const btn = document.getElementById('back-to-top'); - 定义显隐逻辑函数：
function toggleBtnVisibility() { const y = window.scrollY; btn.style.display = y > 300 ? 'block' : 'none'; } - 创建防抖版处理函数：
const debouncedToggle = debounce(toggleBtnVisibility, 150); - 绑定监听：
window.addEventListener('scroll', debouncedToggle);
注意：150ms 是常用值，足够过滤抖动又不会明显延迟响应；若需更快反馈，可降至 100ms，但不宜低于 50ms，否则失去防抖意义。
防抖 vs 节流的选择提醒
这里推荐防抖，不是节流，因为按钮显隐只关心“最终是否该显示”，不依赖“滚动过程中的中间状态”。节流会在固定间隔强制执行（比如每 200ms 判断一次），即使用户还在持续滚动，也会反复操作 DOM——这反而增加无谓开销。而防抖等用户真正停下才行动，更契合业务语义。
