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

最新推荐文章于 2025-05-01 23:24:04 发布

Micro麦可乐

最新推荐文章于 2025-05-01 23:24:04 发布

阅读量1.5k

点赞数 57

分类专栏：前端技术文章标签：前端防抖函数 javascript debounce html5 ajax

本文链接：https://blog.csdn.net/lhmyy521125/article/details/147640414

版权

前端技术专栏收录该内容

8 篇文章

订阅专栏

在这里插入图片描述

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志
🎐 个人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. 高阶技巧与注意事项

立即执行模式：
在不使用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)
  }
}

防抖与节流区别：
- 防抖（Debounce）：等电梯（最后一个人进来后等10秒关门）
- 节流（Throttle）：发短信（每60秒只能发一次）
性能优化：
- 高频事件（如mousemove）建议结合requestAnimationFrame
- 避免在防抖函数中处理大型对象