JavaScript防抖与节流函数原理与实现_javascript优化-js教程-PHP中文网

防抖和节流是前端优化高频事件的两种技术。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索框输入等场景；节流则保证单位时间内最多执行一次，适合滚动监听等持续触发场景。两者核心都是控制函数执行频率，提升性能。

javascript防抖与节流函数原理与实现_javascript优化

在前端开发中，频繁触发的事件如窗口滚动、窗口缩放、输入框输入等，容易导致性能问题。为优化这类场景，防抖（debounce）和节流（throttle）是两个非常实用的技术手段。它们的核心目标是控制函数执行频率，减少不必要的调用。

防抖（Debounce）原理与实现

防抖的思路是：当事件被触发后，设置一个延迟执行的定时器；如果在延迟时间内事件再次被触发，则清除之前的定时器并重新开始计时。只有在最后一次触发后，经过指定时间未再触发，函数才会真正执行。

适用于搜索框输入建议、按钮重复点击防止等场景。

简单实现：

function debounce(func, delay) {
  let timer = null;
  return function (...args) {
    const context = this;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

使用示例：

```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function(e) { console.log('搜索:', e.target.value); }, 300)); ```

这样，用户在输入过程中不会立即发起请求，只有停止输入300毫秒后才执行搜索逻辑。

节流（Throttle）原理与实现

节流的思路是：保证函数在一定时间间隔内最多只执行一次。无论事件触发多少次，在设定的时间周期内，函数只会执行一次，常用于高频事件的限频处理。

ApiPost接口调试与文档生成工具

ApiPost是一个支持团队协作，支持模拟POST、GET、PUT等常见请求，并可直接生成文档的API调试、管理工具，ApiPost是后台接口开发者或前端、接口测试人员的工作必备工具。快速生成、一键导出API文档。感兴趣的朋友快来下载吧。软件说明ApiPost官方版是一款十分出色的接口调试与文档生成工具，ApiPost官方版界面美观大方，功能强劲实用，支持团队协作，支持模拟POST、GET、PUT等常见请求，是后台接口开发者或前端、接口测试人员的工作必备工具。软件特色更方便支持接口调试的同时快速生成、一键

下载

适用于窗口滚动、鼠标移动、页面拖拽等持续触发的场景。

基于时间戳实现：

function throttle(func, delay) {
  let previous = 0;
  return function (...args) {
    const now = Date.now();
    const context = this;
    if (now - previous >= delay) {
      func.apply(context, args);
      previous = now;
    }
  };
}

使用定时器实现（更平滑）：

function throttle(func, delay) {
  let timer = null;
  return function (...args) {
    const context = this;
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  };
}

使用示例：

```javascript window.addEventListener('scroll', throttle(() => { console.log('页面滚动'); }, 100)); ```

这样每100毫秒最多输出一次“页面滚动”，避免因频繁触发而影响性能。