前端函数防抖（Debounce）完整讲解 - 从原理、应用到完整实现

古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
个人CSND主页——Micro麦可乐的博客
《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战
《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战
《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解
《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用
✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧
《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程
《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整
《Spring Security》专栏中我们将逐步深入Spring Security的各个技术细节，带你从入门到精通，全面掌握这一安全技术
如果文章能够给大家带来一定的帮助！欢迎关注、评论互动～

1. 前言

在我们日常前端开发中，高频触发的事件（如输入框输入、窗口缩放、滚动事件）可能导致性能问题甚至引发BUG。函数防抖（debounce）是一种常见且高效的性能优化手段，用于限制高频事件触发下的函数调用次数，从而减少不必要的计算、网络请求或 DOM 操作。

本文博主将带着小伙伴一起深入解析防抖机制的原理、六大应用场景，并提供可直接复用的代码示例。

---

2. 为什么使用防抖？

我们来看看你是否也遇到这样的问题：

当用户快速连续触发事件时，例如：

• 搜索框每输入一个字符立即请求接口
• 窗口缩放时频繁更新布局
• 疯狂点击提交按钮

会导致：

• 性能浪费：不必要的计算/请求
• 数据错乱：异步请求响应顺序不可控
• 用户体验差：界面卡顿或闪烁

函数防抖的核心思想是在连续触发的事件停止后，仅执行最后一次调用，以避免频繁触发带来的性能问题。
延迟执行 + 重置计时器：在事件被触发后等待指定时间（如300ms），若期间没有再次触发，则执行函数；若期间重复触发，则重新开始计时

---

3. 函数防抖的应用场景

场景	示例	解决方案
搜索建议	输入框联想词查询	停止输入300ms后发起请求
按钮提交	防止重复提交订单	点击后禁用按钮直至操作完成
窗口调整	响应式布局计算	窗口停止调整后执行计算
滚动加载	无限滚动加载更多	停止滚动后触发检测
画布绘制	实时预览图形渲染	停止拖拽后更新渲染
表单验证	密码强度实时检测	输入结束再进行复杂校验

为了让大家更清晰了解其应用场景，我们例举几个说明：

1、输入框实时搜索
在用户输入关键词时触发搜索接口，若不加限制，每次 keyup 都会发起请求，极易导致接口压力过大。使用防抖后，只在用户停止输入（如 300ms）后才发送请求，有效降低调用次数

2、按钮防连点
对于提交表单或支付按钮，连续点击可能导致多次提交。给点击事件绑定防抖函数，可在用户短时间内多次点击时只执行一次提交操作

3、窗口大小调整（resize）
当页面布局需根据窗口大小实时计算或重绘时，resize 事件会频繁触发，添加防抖能减少重绘次数，提升性能

4、滚动监听
结合无限滚动或懒加载，当用户滚动页面时应控制数据加载频率，避免重复请求或过度渲染

---

4. 完整代码实现

防抖函数通过内部维护一个定时器 ID，每次调用时先清除之前的定时器，再启动一个新的延迟执行定时器；只有在最后一次调用后的延迟时间到达后，才真正执行目标函数

❶ 基础防抖函数

先看一个简单实现：

/**
 * 防抖函数
 * @param {Function} fn  需要防抖的函数
 * @param {number} delay 延迟时间（毫秒）
 * @returns {Function}    包装后的防抖函数
 */
function debounce(fn, delay = 300) {
  let timer = null
  
  return function(...args) {
    // 每次触发时清除之前的计时器
    if (timer) clearTimeout(timer)
    
    // 设置新的计时器
    timer = setTimeout(() => {
      fn.apply(this, args)  // 确保正确的this上下文
      timer = null
    }, delay)
  }
}

上述代码利用 JavaScript 闭包，让每个防抖函数维护独立的 timeoutId，在多次调用时只有最后一次延迟结束后触发

❷ 使用示例（输入框搜索）

<input type="text" id="searchInput">

<script>
const searchInput = document.getElementById('searchInput')

// 原始请求函数
function fetchSearchResult(keyword) {
  console.log(`搜索关键词: ${keyword}`)
  // 实际调用API接口...
}

// 包装为防抖版本（500ms延迟）
const debouncedFetch = debounce(fetchSearchResult, 500)

// 绑定输入事件
searchInput.addEventListener('input', (e) => {
  debouncedFetch(e.target.value.trim())
})
script>

❸ React Hooks 防抖实现

import { useCallback, useEffect, useRef } from 'react'

// 自定义防抖Hook
function useDebounce(fn, delay) {
  const timerRef = useRef(null)

  const debouncedFn = useCallback((...args) => {
    if (timerRef.current) clearTimeout(timerRef.current)
    
    timerRef.current = setTimeout(() => {
      fn(...args)
      timerRef.current = null
    }, delay)
  }, [fn, delay])

  // 组件卸载时清除计时器
  useEffect(() => {
    return () => {
      if (timerRef.current) clearTimeout(timerRef.current)
    }
  }, [])

  return debouncedFn
}

// 在组件中使用
function SearchBox() {
  const [keyword, setKeyword] = useState('')
  
  // 防抖请求函数
  const debouncedSearch = useDebounce((value) => {
    console.log('实际搜索:', value)
  }, 500)

  const handleChange = (e) => {
    setKeyword(e.target.value)
    debouncedSearch(e.target.value)
  }

  return <input value={keyword} onChange={handleChange} />
}

❹ 使用 Lodash 的 _.debounce

在实际项目中，为了减少手写错误并获得更丰富的功能（如 leading、trailing、cancel、flush 等选项），推荐使用成熟的工具库 Lodash 的 _.debounce 方法

# 安装 lodash.debounce 子模块
npm install lodash.debounce

快速使用：

import debounce from 'lodash.debounce';

/** 
 * 在搜索框中使用防抖 
 * 当用户停止输入 300ms 后才触发搜索 
 */
const searchInput = document.getElementById('search');
function onSearch(query) {
  // 发送搜索请求
  console.log('搜索关键词：', query);
}
const debouncedSearch = debounce(onSearch, 300, { leading: false, trailing: true });

searchInput.addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

参数说明

• leading: 是否在延迟开始前调用一次，默认 false。
• trailing: 是否在延迟结束后调用一次，默认 true。
• 返回的函数还拥有 cancel() 和 flush() 方法，可在需要时取消或立即执行待定调用

5. 高阶技巧与注意事项

1. 立即执行模式：
   在不使用Lodash库时，我们也可以添加立即执行选项，首次触发立即执行，后续触发进入防抖

   function debounce(fn, delay, immediate = false) {
     let timer
     return function(...args) {
       if (immediate && !timer) fn.apply(this, args)
       if (timer) clearTimeout(timer)
       timer = setTimeout(() => {
         if (!immediate) fn.apply(this, args)
         timer = null
       }, delay)
     }
   }
   

2. 防抖与节流区别：

   • 防抖（Debounce）：等电梯（最后一个人进来后等10秒关门）
   • 节流（Throttle）：发短信（每60秒只能发一次）

3. 性能优化：

   • 高频事件（如mousemove）建议结合requestAnimationFrame
   • 避免在防抖函数中处理大型对象

---

6. 结语

函数防抖是前端性能优化中的一项基础技术，适用于各种需要限制高频事件调用的场景，通过本文介绍的 定时器逻辑 或成熟的 Lodash 工具库，就能快速落地。通过本文的代码示例，小伙伴们可以快速将其应用到实际项目中。当遇到高频触发事件时，不妨先思考：这个场景是否需要防抖？

如果你在实践过程中有任何疑问或更好的扩展思路，欢迎在评论区留言，最后希望大家 一键三连 给博主一点点鼓励！

---

前端技术专栏回顾：

01【前端技术】 ES6 介绍及常用语法说明
02【前端技术】标签页通讯localStorage、BroadcastChannel、SharedWorker的技术详解
03 前端请求乱序问题分析与AbortController、async/await、Promise.all等解决方案
04 前端开发中深拷贝的循环引用问题：从问题复现到完美解决
05 前端AJAX请求上传下载进度监控指南详解与完整代码示例
06 TypeScript 进阶指南 - 使用泛型与keyof约束参数
07 前端实现视频文件动画帧图片提取全攻略 - 附完整代码样例