防抖和节流是优化高频事件性能的两种核心策略：防抖只执行最后一次操作，适用于获取最终状态；节流按固定间隔执行，适用于过程反馈。
防抖和节流是解决高频事件（如 input、scroll、resize）引发性能问题的两个核心手段。它们不改变业务逻辑，而是通过控制函数执行时机与频次，让页面更流畅、请求更合理、内存更稳定。
防抖适用于“等用户停下来再干活”的场景
防抖的核心是：**只响应最后一次操作**。只要事件还在持续触发，就不断重置计时器；只有当触发完全停止、且超过设定延迟后，才真正执行函数。
- 典型用途：搜索框输入联想、表单实时校验、窗口 resize 后重新布局
- 关键逻辑：每次调用都
clearTimeout前一个定时器，再新建一个 - 推荐写法（支持 this 和参数传递）：
function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } - 使用示例：
const handleSearch = debounce((value) => { fetch(`/api/search?q=${value}`); }, 300); input.addEventListener('input', (e) => handleSearch(e.target.value));
节流适用于“匀速稳定输出”的场景
节流的核心是：**固定节奏执行，宁可丢弃中间调用，也不堆积**。无论事件多快，函数在指定时间间隔内最多执行一次，像节拍器一样稳定输出。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 典型用途：滚动加载更多、鼠标拖拽反馈、canvas 动画帧同步
- 两种主流实现方式：
✓ 时间戳版（轻量、无定时器开销）：记录上一次执行时间，当前时间减去它 ≥ 间隔才执行
✓ 定时器版（更易理解）：用setTimeout占位，执行后清空，下次触发需等待占位释放 - 时间戳版推荐写法：
function throttle(func, delay) { let lastTime = 0; return function(...args) { const now = Date.now(); if (now - lastTime >= delay) { func.apply(this, args); lastTime = now; } }; }
怎么选？看事件是否需要“最终结果”还是“过程反馈”
这是最实用的判断依据：
立即学习“Java免费学习笔记（深入）”；
- 要的是最终状态（比如用户输完搜什么、窗口最终尺寸多少）→ 用 防抖
- 要的是过程节奏（比如滚动中实时计算可视区域、拖拽中持续更新坐标）→ 用 节流
- 特别注意：防抖若设置过长（如 800ms），会导致响应滞后；节流若设太短（如 10ms），仍可能压垮主线程。建议从 100–300ms 起调，结合 FPS 监控调整
实际项目中容易忽略的细节
-
this 指向和参数丢失：包装函数里务必用
func.apply(this, args)或箭头函数 + 展开运算符保持上下文 -
立即执行需求：某些交互（如首次点击按钮立刻响应）需扩展防抖支持
immediate参数，首次触发即执行，后续进入延迟模式 - 清理副作用：组件卸载或监听器移除前，应清除残留定时器（尤其节流定时器版），避免内存泄漏
- 不要混用：同一事件链中同时加防抖和节流不仅无益，反而增加复杂度和不可预测性
