javascript_如何实现防抖函数-js教程-PHP中文网

javascript_如何实现防抖函数

紅蓮之龍

发布： 2025-12-04 20:13:24

原创

924人浏览过

防抖函数通过定时器延迟执行回调，频繁触发时重置计时，确保事件停止后指定时间再执行。支持立即执行模式，适用于搜索输入、窗口缩放等场景，有效减少函数调用次数，核心是利用setTimeout和clearTimeout控制执行时机。

javascript_如何实现防抖函数

防抖函数（Debounce）是一种优化高频触发事件的手段，常用于窗口滚动、输入框搜索等场景。它的核心思想是：在事件被触发一段时间后才执行回调，如果在这段时间内事件再次被触发，则重新计时。

防抖的基本实现原理

利用 setTimeout 延迟执行函数，并在每次触发时清除之前的定时器。只有当事件停止触发超过指定时间后，目标函数才会真正执行。

一个基础的防抖函数实现如下：

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func.apply(this, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

登录后复制

说明：

立即学习“Java免费学习笔记（深入）”；

AIBox 一站式AI创作平台

AIBox365一站式AI创作平台，支持ChatGPT、GPT4、Claue3、Gemini、Midjourney等国内外大模型

224

查看详情

func 是需要防抖的原函数
wait 是等待时间（毫秒）
返回的新函数会维护一个定时器，在每次调用时重置它
使用 apply 保证原函数的 this 指向和参数正确传递

立即执行版本（leading edge）

有时希望第一次触发立刻执行，之后的触发才进入防抖流程。可以加一个 immediate 参数来控制。

function debounce(func, wait, immediate) {
  let timeout;
  return function executedFunction(...args) {
    const context = this;
    const later = () => {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    const callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

登录后复制

适用场景举例：

搜索框输入监听：用户打字时延迟请求接口，避免每输一个字就发一次请求
窗口大小调整：resize 事件频繁触发，用防抖控制布局重计算频率
按钮防重复点击：配合节流或防抖防止短时间内多次提交

实际使用示例

```javascript const searchInput = document.getElementById('search'); searchInput.addEventListener('input', debounce(function(e) { console.log('搜索关键词:', e.target.value); // 发起搜索请求... }, 300)); ```

这样，只有当用户停止输入 300ms 后才会触发搜索，有效减少请求次数。

基本上就这些。防抖不复杂但容易忽略细节，关键是理解定时器的清除与重设逻辑。根据业务需求选择是否立即执行，就能应对大多数场景了。

以上就是javascript_如何实现防抖函数的详细内容，更多请关注php中文网其它相关文章！