JavaScript 中性能优化怎么使用防抖（Debounce）与节流（Throttle）控制高频事件触发-js教程-PHP中文网

防抖和节流是优化高频事件性能的两种核心策略：防抖只执行最后一次操作，适用于获取最终状态；节流按固定间隔执行，适用于过程反馈。

javascript 中性能优化怎么使用防抖（debounce）与节流（throttle）控制高频事件触发

防抖和节流是解决高频事件（如 input、scroll、resize）引发性能问题的两个核心手段。它们不改变业务逻辑，而是通过控制函数执行时机与频次，让页面更流畅、请求更合理、内存更稳定。

防抖适用于“等用户停下来再干活”的场景

防抖的核心是：**只响应最后一次操作**。只要事件还在持续触发，就不断重置计时器；只有当触发完全停止、且超过设定延迟后，才真正执行函数。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

典型用途：搜索框输入联想、表单实时校验、窗口 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));

节流适用于“匀速稳定输出”的场景

节流的核心是：**固定节奏执行，宁可丢弃中间调用，也不堆积**。无论事件多快，函数在指定时间间隔内最多执行一次，像节拍器一样稳定输出。

典型用途：滚动加载更多、鼠标拖拽反馈、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;
    }
  };
}

怎么选？看事件是否需要“最终结果”还是“过程反馈”

这是最实用的判断依据：

要的是最终状态（比如用户输完搜什么、窗口最终尺寸多少）→ 用防抖
要的是过程节奏（比如滚动中实时计算可视区域、拖拽中持续更新坐标）→ 用节流
特别注意：防抖若设置过长（如 800ms），会导致响应滞后；节流若设太短（如 10ms），仍可能压垮主线程。建议从 100–300ms 起调，结合 FPS 监控调整