javascript如何实现防抖与节流_性能优化有哪些技巧_技术教程

防抖是“等用户停止操作后再执行”，节流是“按固定间隔执行”；防抖适用于搜索输入等需等待结束的场景，节流适用于滚动、拖拽等需持续响应的场景。

防抖（Debounce）和节流（Throttle）是前端处理高频事件（如 resize、scroll、input）的核心性能优化手段，本质都是控制函数执行频率，但触发逻辑不同：防抖是“等你停了再执行”，节流是“固定节奏执行”。下面直接给出可落地的实现和关键细节。

防抖：只响应最后一次操作

适用于搜索框输入联想、窗口大小校验等——用户停止输入后才发起请求或计算。

核心逻辑：每次触发时清除上一次定时器，重新设置新定时器。

示例代码：

function debounce(fn, delay) {
  let timer = null;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}
// 使用
const search = debounce((query) => {
console.log('请求搜索:', query);
}, 300);
input.addEventListener('input', (e) => search(e.target.value));

注意点：

必须用 apply 或 call 保证 this 和参数正确传递
需要立即执行首次调用？加个 immediate 参数（常见于按钮防重复点击）
组件卸载时记得清除定时器，避免内存泄漏（React 中在 useEffect 清理）

节流：按固定间隔执行

适用于滚动加载、鼠标拖拽、Canvas 绘图等——不能等用户停下，但也不能每帧都执行。

核心逻辑：用时间戳或定时器控制是否允许执行。推荐时间戳方案，更精准、无延迟累积。

示例代码（时间戳版）：

function throttle(fn, limit) {
  let lastRun = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastRun >= limit) {
      fn.apply(this, args);
      lastRun = now;
    }
  };
}
// 使用
const handleScroll = throttle(() => {
console.log('滚动中...');
}, 100);
window.addEventListener('scroll', handleScroll);

对比说明：

定时器版节流会“丢帧”（比如 100ms 限制下，连续触发可能只执行第 1、3、5 次），时间戳版更平滑
节流函数本身不阻塞后续调用，只是跳过执行；防抖则会不断重置等待期

实际项目中的性能优化技巧

防抖/节流只是入口，真正提升体验还需配合其他策略：

用 requestIdleCallback 做低优先级任务：适合非即时性操作（如日志上报、DOM 预渲染），浏览器空闲时才执行
监听器加 { passive: true }：对 scroll、touchstart 等默认可取消事件，声明 passive 可大幅提升滚动流畅度
用 IntersectionObserver 替代 scroll + getBoundingClientRect：懒加载图片、无限滚动检测更高效且不触发重排
避免在节流/防抖回调里做重计算：比如不要在 scroll 节流里反复调用 getComputedStyle，提前缓存或用 CSS 变量代替