当前位置：首页 > news >正文

前端实现防抖功能的详细解读

news 来源：原创 2025/9/21 23:03:18

在前端开发中，防抖（Debounce） 是一种优化技术，用于限制某个函数在短时间内被频繁调用的次数。它的核心思想是：在一定时间内，无论触发多少次事件，只执行最后一次操作。防抖通常用于处理用户输入、窗口调整、滚动事件等高频触发的场景，以减少不必要的计算或请求，提升性能。

1. 防抖的应用场景

常见场景

搜索框输入：
- 当用户在搜索框中输入内容时，每次按键都会触发搜索请求。如果不做防抖处理，可能会导致大量不必要的请求。
- 使用防抖后，只有在用户停止输入一段时间后，才会触发搜索请求。
窗口调整（resize）：
- 当用户调整浏览器窗口大小时，会频繁触发 resize 事件。
- 使用防抖后，只有在用户停止调整窗口大小一段时间后，才会执行相关逻辑。
滚动事件（scroll）：
- 当用户滚动页面时，会频繁触发 scroll 事件。
- 使用防抖后，只有在用户停止滚动一段时间后，才会执行相关逻辑。
按钮点击：
- 当用户快速点击按钮时，可能会触发多次点击事件。
- 使用防抖后，只有在用户停止点击一段时间后，才会执行点击逻辑。

2. 防抖的实现原理

防抖的核心原理是：

设置一个定时器，在事件触发后等待一段时间。
如果在这段时间内再次触发事件，则清除之前的定时器，重新开始计时。
只有当事件停止触发一段时间后，才会执行目标操作。

3. 防抖的实现代码

原生 JavaScript 实现

function debounce(func, delay) {let timeout;return function (...args) {clearTimeout(timeout); // 清除之前的定时器timeout = setTimeout(() => {func.apply(this, args); // 在延迟后执行目标函数}, delay);};
}

使用示例

function onInput() {console.log('Input value:', document.getElementById('search').value);
}const debouncedInput = debounce(onInput, 300);document.getElementById('search').addEventListener('input', debouncedInput);

解释：

debounce 函数返回一个新的函数，这个新函数会在事件停止触发 delay 毫秒后执行目标函数 func。
每次事件触发时，都会清除之前的定时器并重新开始计时。

Vue 3 中使用 customRef 实现防抖

import { customRef } from 'vue';function useDebouncedRef(value, delay = 300) {let timeout;return customRef((track, trigger) => {return {get() {track(); // 追踪依赖return value;},set(newValue) {clearTimeout(timeout); // 清除之前的定时器timeout = setTimeout(() => {value = newValue; // 更新值trigger(); // 触发更新}, delay);},};});
}// 在组件中使用
export default {setup() {const debouncedValue = useDebouncedRef('');return {debouncedValue,};},
};

解释：

useDebouncedRef 是一个自定义的防抖 ref。
在 set 方法中，使用 setTimeout 延迟更新值，从而实现防抖效果。

4. 防抖与节流的区别

特性	防抖（Debounce）	节流（Throttle）
定义	在事件停止触发一段时间后执行一次操作	在一定时间间隔内只执行一次操作
适用场景	输入框搜索、窗口调整、滚动事件等	滚动事件、鼠标移动、按钮点击等
核心逻辑	每次触发事件时重置定时器	在一定时间间隔内只执行一次操作
执行时机	事件停止触发后执行	按照固定时间间隔执行

5. 防抖的实际应用示例

示例 1：搜索框防抖

<input type="text" id="search" placeholder="Search..." /><script>function debounce(func, delay) {let timeout;return function (...args) {clearTimeout(timeout);timeout = setTimeout(() => {func.apply(this, args);}, delay);};}function search() {const query = document.getElementById('search').value;console.log('Searching for:', query);// 这里可以发起搜索请求}const debouncedSearch = debounce(search, 300);document.getElementById('search').addEventListener('input', debouncedSearch);
</script>

解释：

用户在搜索框中输入内容时，只有在停止输入 300 毫秒后，才会触发搜索逻辑。

示例 2：窗口调整防抖

function debounce(func, delay) {let timeout;return function (...args) {clearTimeout(timeout);timeout = setTimeout(() => {func.apply(this, args);}, delay);};
}function onResize() {console.log('Window resized:', window.innerWidth, window.innerHeight);
}const debouncedResize = debounce(onResize, 200);window.addEventListener('resize', debouncedResize);

解释：

当用户调整窗口大小时，只有在停止调整 200 毫秒后，才会触发 onResize 逻辑。

6. 总结

防抖是一种优化技术，用于限制函数在短时间内被频繁调用的次数。
它的核心思想是：在一定时间内，无论触发多少次事件，只执行最后一次操作。
防抖常用于处理用户输入、窗口调整、滚动事件等高频触发的场景。
通过防抖，可以减少不必要的计算或请求，提升性能。

前端实现防抖功能的详细解读

在前端开发中，防抖（Debounce） 是一种优化技术，用于限制某个函数在短时间内被频繁调用的次数。它的核心思想是：在一定时间内，无论触发多少次事件，只执行最后一次操作。防抖通常用于处理用户输入、…...

编程日记 2025/9/21 23:03:18

VUE3环境搭建

最近准备用Vue编写一点前端页面，我在前端一直是个小白，之前用的Vue2写了几个页面，现在已经是VUE3了，重新安装下环境开始。 1.npm安装 Vue需要用npm安装，npm是nodejs的package manager，这里我们安装下node…...

编程日记 2025/9/18 8:10:41

1-16 tortoiseGit分支与Git操作

1-1 创建分支什么时候需要开分支？ - 隔离线上版本和开发版本 - 大功能开发，不想影响到其他人，自己独立开个分支去开发 SVN经典目录结构： - trunk-------------------------开发中的文件 - bran…...

编程日记 2025/9/21 17:53:43

【VB语言】EXCEL中VB宏的应用

【VB语言】EXCEL中VB宏的应用文章目录 [TOC](文章目录) 前言一、EXCEL-VB1.实验过程2.代码二、EXCEL-VB 生成.c.h文件1.实验过程2.代码四、参考资料总结前言 1.WPS-VB扩展包提示：以下是本篇文章正文内容，下面案例可供参考一、EXCEL-VB 1.实验过…...

编程日记 2025/9/22 8:33:19

前端优化可以从哪些方面下手及优化方案

前端优化是提升网页性能、提升用户体验和降低服务器负担的重要手段。可以从多个角度入手，以下是一些常见的优化方向和方案： 1. 性能优化减少请求数量：尽量减少页面加载时发起的 HTTP 请求，例如使用合并文件（CSS 和 …...

编程日记 2025/9/17 7:04:22

类和对象(5)——抽象类和接口

目录 1. 抽象类 1.1 抽象类的概念 1.2 抽象类语法：abstract关键字 1.3 抽象类的特性 1.4 抽象类的作用 2. 接口 2.1 接口的概念 2.2 接口语法：interface关键字 2.3 接口的实现：implements关键字 2.4 接口的特性 2.5 实现多个接口 …...

编程日记 2025/9/21 12:08:13

海康摄像头IPV6模式，手动，自动，路由公告

海康摄像头DS-2DC7220IW-A 网络设置中的IPv6配置选项。IPv6是互联网协议（IP）的第六版，用于替代IPv4，提供更多的IP地址和改进的网络功能。图片中的选项允许用户选择如何配置设备的IPv6网络连接： 手动：用户可…...

编程日记 2025/9/21 7:49:52

LabVIEW与USB设备开发

开发一台USB设备并使用LabVIEW进行上位机开发，涉及底层驱动的编写、USB通信协议的实现以及LabVIEW与设备的接口设计。本文将详细介绍如何开发USB设备驱动、实现LabVIEW与USB设备的通信以及优化数据传输，帮助用户顺利完成项目开发。下面是一个详细的说明&…...

编程日记 2025/9/21 16:44:22

BY组态：工业自动化的未来，触手可及

在工业4.0的浪潮下，智能化、数字化已成为制造业发展的核心驱动力。作为工业自动化领域的重要工具，组态软件在实现设备监控、数据采集、流程控制等方面发挥着不可替代的作用。然而，传统的组态软件往往存在开发周期长、学习成本高、灵活性不足等…...

编程日记 2025/9/19 23:35:38

深入理解Python多进程编程 multiprocessing

深入理解Python多进程编程 multiprocessing flyfish Python 的 multiprocessing 模块允许创建多个进程，从而可以利用多核处理器的能力来并行执行任务。这意味着程序的不同部分可以在不同的CPU核心上同时运行，极大地提高了处理效率，特别是在…...

编程日记 2025/9/21 13:42:56

使用DeepSeek建立一个智能聊天机器人0.12

为了确保这段代码能够在Windows和Linux系统上都能正常运行，我考虑以下几个方面：路径分隔符：在Windows和Linux中，文件路径的分隔符不同。Windows使用反斜杠（\），而Linux使用正斜杠（/）。我们可以使用 os.path.join 来处理路径，以确保跨平台兼容性。消息框：tkinter.…...

编程日记 2025/9/21 6:05:58

基于VLC的Unity视频播放器（三）

关于UMP插件 UMP插件不更新了，我测试在Ubuntu24.04上编辑器和运行时都无法正常播放，在替换lib之后编辑器可以播放，但打包后不行……很奇怪继续更新了一下UnityVLC 添加了对Linux的支持，勉强都可以播放了…… Win截图 Ubuntu2…...

编程日记 2025/9/19 23:34:38

每日一题——把数字翻译成字符串

把数字翻译成字符串题目描述示例示例1示例2 题解动态规划代码实现复杂度分析总结题目描述有一种将字母编码成数字的方式：‘a’->1, ‘b’->2, … , ‘z’->26。现在给一串数字，返回有多少种可能的译码结果。数据范围：字符串…...

编程日记 2025/9/18 18:54:18

基于状态观测器和物联网基础设施的智能电网高速孤岛检测

论文标题中文标题： 基于状态观测器和物联网基础设施的智能电网高速孤岛检测英文标题： High-Speed Islanding Detection in Smart Grids Using a State Observer and IoT Infrastructure 作者信息 Shahid Karim<sup>1,2, *</sup>, Prajo…...

编程日记 2025/9/21 8:44:08

FPGA的星辰大海

编者按时下风头正盛的DeepSeek，正值喜好宏大叙事的米国大统领二次上岗就业，OpenAI、软银、甲骨文等宣布投资高达5000亿美元“星际之门”之际，对比尤为强烈。某种程度上，，是低成本创新理念的直接落地。包括来自开源社区的诸多赞誉是，并非体现技术有多“超越”，而是…...

编程日记 2025/9/21 2:16:47

【Black Mesa】黑山起源用服务器开服多人联机教程

1、登录服务器（百度莱卡云游戏面板） 进入控制面板后会出现正在安装的界面，安装大约10分钟（如长时间处于安装中请联系我们的客服人员） 2、修改端口看到一下图片的界面时说明服务器已经安装完成，服务器需要…...

编程日记 2025/9/21 15:17:18

【学习笔记】深度学习网络-深度模型中的优化

作者选择了由 Ian Goodfellow、Yoshua Bengio 和 Aaron Courville 三位大佬撰写的《Deep Learning》(人工智能领域的经典教程，深度学习领域研究生必读教材),开始深度学习领域学习，深入全面的理解深度学习的理论知识。在之前的文章中介绍了深度学习中…...

编程日记 2025/9/21 3:32:19

java八股文之Redis

1.Rdis常见的使用场景缓存分布式锁（redision，setnx）计数器保存token消息队列延迟队列 2.说明一下缓存雪崩，缓存穿透和缓存击穿以及解决方式 1.缓存雪崩定义： 缓存雪崩指的是当大量的缓存数据同时失效&#xff0c…...

编程日记 2025/9/20 7:56:53

ubuntu系统下KVM设置桥接网络（失败）

20250216 - 概述因实验需求，需要设置KVM下的虚拟机采用桥接模式进行通信，这种方式将使虚拟机与主机类似使用同一网段的IP。实际上，为了实现这个功能，我已经在自己mac上VMware使用过，虚拟机获得了自己独立的IP。但…...

编程日记 2025/9/20 19:00:55

CentOS 7操作系统部署KVM软件和创建虚拟机

CentOS 7.9操作系统部署KVM软件和配置指南，包括如何创建一个虚拟机。步骤 1: 检查硬件支持首先，确认您的CPU支持虚拟化技术，并且已在BIOS中启用： egrep -c (vmx|svm) /proc/cpuinfo 如果输出大于0，则表示支持虚拟…...

编程日记 2025/9/17 6:01:47

驱动开发系列38 - Linux Graphics 3D 绘制流程（一）- 创建画布

一：概述当应用程序创建 OpenGL 上下文时，它通常需要申请帧缓冲（Framebuffer，即画布）。在 X11 体系下，应用程序不会直接向内核的 DRM 模块请求创建帧缓冲，而是通过 X 服务器进行申请。虽然从技术上讲，应用程序可以直接使用 DRM 接口创建帧缓冲对象（BO），但为了将其与…...

编程日记 2025/9/20 17:17:16

Spring Boot过滤器链：从入门到精通

文章目录一、过滤器链是什么？二、为什么需要过滤器链？三、Spring Boot中的过滤器链是如何工作的？（一）过滤器的生命周期（二）过滤器链的执行流程四、如何在Spring Boot中定义自己的过滤器&#…...

编程日记 2025/9/19 20:56:46

QT 读写锁

一、概述 1、读写锁是一种线程同步机制，用于解决多线程环境下的读写竞争问题。 2、读写锁允许多个线程同时获取读锁（共享访问），但只允许一个线程获取写锁（独占访问）。 3、这种机制可以提高并发性能&…...

编程日记 2025/9/17 7:02:17

C++中的智能指针

智能指针总结智能指针其作⽤是管理⼀个指针，避免程序员申请的空间在函数结束时忘记释放，造成内存泄漏这种情况滴发⽣。使⽤智能指针可以很⼤程度上的避免这个问题，因为智能指针就是⼀个类，当超出了类的作⽤域是，类会…...

编程日记 2025/9/17 6:20:17

IntelliJ IDEA 接入 AI 编程助手（Copilot、DeepSeek、GPT-4o Mini）

IntelliJ IDEA 接入 AI 编程助手（Copilot、DeepSeek、GPT-4o Mini） 📊 引言近年来，AI 编程助手已成为开发者的高效工具，它们可以加速代码编写、优化代码结构，并提供智能提示。本文介绍如何在 IntelliJ I…...

编程日记 2025/9/20 22:53:06

【R语言】非参数检验

一、Mann-Whitney检验在R语言中，Mann-Whitney U检验（也称为Wilcoxon秩和检验）用于比较两个独立样本的中位数是否存在显著差异。它是一种非参数检验，适用于数据不满足正态分布假设的情况。 1、独立样本 # 创建两个独立样本数据…...

编程日记 2025/9/18 8:12:11

PyTorch 源码学习：阅读经验代码结构

分享自己在学习 PyTorch 源码时阅读过的资料。本文重点关注阅读 PyTorch 源码的经验和 PyTorch 的代码结构。因为 PyTorch 不同版本的源码实现有所不同，所以笔者在整理资料时尽可能按版本号升序，版本号见标题前[]。最新版本的源码实现还请查看 PyTorch 仓…...

编程日记 2025/9/22 3:51:35

04运维实用篇（D4_日志）

目录一、简介二、代码中使用日志工具记录日志 1. 操作步骤步骤1：添加日志记录操作步骤2：设置日志输出级别步骤3：设置日志组 2. 知识小结三、优化日志对象创建代码 1. 实例 2. 总结四、日志输出格式控制 1. 实例 2. 总结 …...

编程日记 2025/9/17 7:00:17

Linux文件管理：硬链接与软链接

文章目录 1. 硬链接的设计目的（1）节省存储空间（2）提高文件管理效率（3）数据持久性（4）文件系统的自然特性 2. 软链接的设计目的**（1）跨文件系统引用****&#x…...

编程日记 2025/9/17 23:29:50

【零基础学Mysql】常用函数讲解,提升数据操作效率的利器

以耳倾听世间繁华，以语表达心中所想大家好,我是whisperrrr. 前言： 大家好，我是你们的朋友whisrrr。在日常工作中，MySQL作为一款广泛使用的开源关系型数据库，其强大的功能为我们提供了便捷的数据存储和管理手段。而在…...

编程日记 2025/9/17 6:48:47

小米平板怎么和电脑共享屏幕

最近尝试使用小米平板和电脑屏幕分屏互联发现是需要做特殊处理的，需要下载一款电脑安装包：小米妙享关于这个安装包，想吐槽的是： 没有找到官网渠道，是通过其他网络方式查到下载的不附录链接，原因是因为地…...

编程日记 2025/9/18 8:11:10

宝藏软件系列篇一：My APK（Android）

文章目录系列文章官方网站特色功能同类软件系列文章官方网站 My APK 官方版本是在谷歌商店中上架的。官方下载地址：Google Play 商店页面。（需要外网） 2025.2最新版本的CSDN本地下载地址（因为是Android App Bundle&…...

编程日记 2025/9/21 4:59:18

本地 Ollama 部署 Deepseek R1 并使用 Spring AI Alibaba 构建 Chat 应用示例

本地部署 Deepseek R1 并使用 Spring AI Alibaba 构建 Chat 应用示例 Ollama 部署 Deepseek R1 官网：https://www.deepseek.com/ Github：https://github.com/deepseek-ai Ollama：https://ollama.com/ Docker Compose 部署一个 Ollama 和…...

编程日记 2025/9/19 9:53:33

centos8.0 docker ngnix

问题1：镜像拉取不下来，用DAO云加速器问题2：ngnix镜像不能运行， 无法检索OCI运行时错误在CentOS上使用Docker来运行Nginx是一个常见的做法，因为它提供了快速、一致的环境配置方式，并且可以很容易地扩展。…...

编程日记 2025/9/19 22:20:51

位运算在数据库中的运用实践-以MySQL和PG为例

目录前言一、两种不同的数据库设计 1、状态字段存储JSON 2、使用位运算二、数据库中的位运算实践 1、MySQL中的位运算实践 2、PostgreSQL中位运算实践三、总结前言最近在解决某用户的一个业务需求时，遇到一个很有意思的场景。首先先跟大家分享一下需…...

编程日记 2025/9/18 8:11:40

IoTDB 常见问题 QA 第五期

关于 IoTDB 的 Q & A 情人节之际，让 IoTDB Q&A 陪您一起共度解惑！我们将定期汇总我们将定期汇总社区讨论频繁的问题，并展开进行详细回答，通过积累常见问题“小百科”，方便大家使用 IoTDB。 Q1：导入…...

编程日记 2025/9/18 8:14:41

【kafka系列】日志存储设计消息写入、读取

目录日志存储设计 1. 日志存储的目录结构 2. 日志内容格式设计 3. 日志索引设计 4. 设计优势消息写入流程示例流程图消息读取流程示例关键设计细节流程图日志存储设计 Kafka的日志存储是其高吞吐、持久化能力的核心设计，其结构包含目录组织、…...

编程日记 2025/9/21 15:56:22

Python实现语音识别详细教程【2025】最新教程

文章目录前言一、环境搭建1. 下载 Python2. 安装 Python3 使用 pip 安装必要的库二、使用 SpeechRecognition 库进行语音识别1.识别本地音频文件2.实时语音识别3. 使用其他语音识别引擎注意事项前言以下是一份较为完整的 Python 语音识别教程，涵盖环境搭建、使…...

编程日记 2025/9/19 14:15:54

【一文读懂】HTTP与Websocket协议

HTTP协议概述 HTTP (Hypertext Transfer Protocol)，即超文本传输协议，是一种用于在客户端和服务器之间传输超文本（例如网页、图片、音频、视频等）的通信协议。它是万维网（WWW）的基础，负责在浏…...

编程日记 2025/9/20 20:21:46

SpringBoot+微信小程序+数据可视化的宠物到家喂宠服务（程序+论文+讲解+安装+调试+售后等）

感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，我会一一回复，希望帮助更多的人。系统介绍在经济高速发展、物质生活极大丰富的当下，人们的精神需求愈发凸显&#xff0…...

编程日记 2025/9/21 12:53:56

Windows逆向工程入门之堆栈结构与信息获取

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录 1. 堆栈结构基础堆栈的主要操作： 2. 代码功能解析 2.1 加载 ntdll.dll 2.2 获取 NtQueryInformationThread 函数指针 2.3 调用 NtQueryInformationThread 获取线程信息…...

编程日记 2025/9/18 8:28:13

springboot项目如何部署到tomcat中

1、使用springboot内部嵌入的tomcat 可以改一些tomcat的参数 2、可以把springboot项目打包为war包，然后部署到tomcat中去 Spring Boot 默认使用嵌入式 Tomcat 作为其 Web 容器，这使得 Spring Boot 应用可以作为一个独立的 JAR 文件运行。这种嵌入式服务…...

编程日记 2025/9/20 18:00:34

C语言之easyX

目录概要 easyX整体架构图形绘制画布宽高圆形图片的贴图加载图像游戏框架概要 easyX是一个轻量级的图形库，用于在Windows平台上进行简单的2D图形绘制。它提供了一组简单易用的函数，可以方便地绘制基本的图形元素，如线条、矩形、圆形…...

编程日记 2025/9/19 15:15:50

es6箭头函数和普通函数的区别

在JavaScript中，函数是执行特定任务的代码块。函数可以被定义并且随后被调用。JavaScript中有两种主要的函数定义方式：普通函数声明和箭头函数表达式。下面是这两种函数的定义方式及其区别和使用场景： 普通函数声明普通函数可以通过函数声明…...

编程日记 2025/9/17 7:38:49

DeepSeek R1 32B 本地部署实战

#DeepSeek# DeepSeek是一款基于人工智能的智能助手，专为提升工作效率和信息获取能力而设计。它结合了自然语言处理、机器学习和大数据技术，能够快速理解用户需求并提供精准的答案或解决方案。 DeepSeek的核心功能智能问答 DeepSeek可以回答各种问题&…...

编程日记 2025/9/21 4:50:48

八、SPI读写XT25数据

8.1 SPI 简介 SPI（Serial Peripheral Interface，串行外设接口）是一种同步串行通信协议，广泛用于嵌入式系统中连接微控制器与外围设备，如传感器、存储器、显示屏等。主要特点 1. 全双工通信：支持同时发送…...

编程日记 2025/9/21 12:40:39

AIP-145 范围

编号145原文链接AIP-145: Ranges状态批准创建日期2020-05-28更新日期2020-05-28 服务通常需要表示具体值或连续值的范围。这些范围的含义存在诸多差异，也存在许多数据类型：整数、浮点数、时间戳等（在此仅举几例）。根据所讨论范围…...

编程日记 2025/9/21 3:15:09

(学习总结24)Linux 基本命令2

Linux 基本命令2 操作文件或目录命令更改文件或目录访问权限命令 chmod修改文件的所有者和所属组命令 chown修改文件或目录的所属组命令 chgrp更改文件或目录的属性命令 chattr创建文件和目录时的默认权限掩码命令 umask判断文件类型命令 file显示文件或文件系统状态命令 stat树…...

编程日记 2025/9/20 5:10:40

WPF-数据转换器

一、单值转换器 1.不传参数转换器当Value值大于100时返回红色 public class DataConverter : IValueConverter{/// <summary>/// 表示从源到目标数据转换/// </summary>/// <param name"value">数据源的值</param>/// <param name&q…...

编程日记 2025/9/21 0:55:49

STM32 I2C通信协议说明

目录背景 I2C协议数据的有效性 I2C通信开始和停止条件 I2C数据传输发送响应正常情况： 异常情况： 主机结束接收写寄存器的标准流程读寄存器的标准流程仲裁机制时钟同步 SDA线的仲裁程序背景对单片机的三大通信中的I2C通信进…...

编程日记 2025/9/20 22:53:08

1. 防抖的应用场景

2. 防抖的实现原理

3. 防抖的实现代码

4. 防抖与节流的区别

5. 防抖的实际应用示例

6. 总结

相关文章：