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

防抖和节流

news 来源：原创 2025/8/20 20:46:53

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化技术，主要用于控制高频事件的触发频率，避免不必要的性能消耗。

1. 防抖（Debounce）

防抖的核心思想：在事件被触发后，等待一段时间（例如 n 毫秒），如果在这段时间内事件没有被再次触发，那么就执行事件处理函数。如果在这段时间内事件又被触发，则重新计时。

应用场景：输入框实时搜索、窗口大小调整、滚动事件等。

代码实现

function debounce(func, wait) {let timeout;return function(...args) {const context = this;clearTimeout(timeout);timeout = setTimeout(() => {func.apply(context, args);}, wait);};
}// 示例：输入框防抖
const input = document.querySelector('input');
const debouncedSearch = debounce(function() {console.log('Searching for:', input.value);
}, 300);input.addEventListener('input', debouncedSearch);

代码解析

debounce 函数：接受两个参数，func 是需要防抖的函数，wait 是等待时间。
timeout 变量：用于存储定时器 ID。
返回的函数：每次事件触发时，清除之前的定时器，并重新设置一个新的定时器。
func.apply(context, args)：在定时器结束后执行传入的函数，并确保 this 和参数的正确传递。

2. 节流（Throttle）

节流的核心思想：在一定时间间隔内（例如 n 毫秒），无论事件触发多少次，只执行一次事件处理函数。

应用场景：滚动加载、按钮点击、鼠标移动等。

代码实现

function throttle(func, wait) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= wait) {func.apply(this, args);lastTime = now;}};
}// 示例：滚动节流
const throttledScroll = throttle(function() {console.log('Scrolling...');
}, 200);window.addEventListener('scroll', throttledScroll);

代码解析

throttle 函数：接受两个参数，func 是需要节流的函数，wait 是时间间隔。
lastTime 变量：记录上一次执行函数的时间。
返回的函数：每次事件触发时，检查当前时间与上一次执行时间的差值是否大于等于 wait，如果是则执行函数并更新 lastTime。

3. 防抖与节流的区别

防抖：在事件停止触发后一段时间内执行一次函数。适合处理连续触发但只需要最后一次结果的情况。
节流：在一定时间间隔内执行一次函数。适合处理连续触发但需要均匀执行的情况。

4. 结合使用防抖和节流

在某些场景下，防抖和节流可以结合使用。例如，在滚动事件中，可以先使用节流来限制函数的执行频率，然后在滚动停止后再使用防抖来执行最终的操作。

function debounce(func, wait) {let timeout;return function(...args) {const context = this;clearTimeout(timeout);timeout = setTimeout(() => {func.apply(context, args);}, wait);};
}function throttle(func, wait) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= wait) {func.apply(this, args);lastTime = now;}};
}const combinedScrollHandler = throttle(debounce(function() {console.log('Scrolling stopped');
}, 300), 100);window.addEventListener('scroll', combinedScrollHandler);

代码解析

throttle 包裹 debounce：首先使用节流来限制函数的执行频率，然后在节流的基础上使用防抖来确保在滚动停止后执行最终的操作。
combinedScrollHandler：在滚动过程中，每 100 毫秒检查一次是否需要执行函数，然后在滚动停止后 300 毫秒执行最终的操作。

总结

防抖：适合处理连续触发但只需要最后一次结果的情况。
节流：适合处理连续触发但需要均匀执行的情况。
结合使用：在某些复杂场景下，可以结合使用防抖和节流来达到更好的性能优化效果。

通过合理使用防抖和节流，可以有效减少不必要的函数调用，提升页面性能和用户体验。

防抖和节流

防抖（Debounce）和节流（Throttle）是前端开发中常用的两种性能优化技术，主要用于控制高频事件的触发频率，避免不必要的性能消耗。 1. 防抖（Debounce） 防抖的核心思想：在事…...

编程日记 2025/8/20 20:46:53

Deepseek可以通过多种方式帮助CAD加速工作

自动化操作：通过Deepseek的AI能力，可以编写脚本来自动化重复性任务。例如，使用Python脚本调用Deepseek API，在CAD中实现自动化操作。插件开发：结合Deepseek进行二次开发，可以创建自定义的CAD插件。例如&a…...

编程日记 2025/8/16 11:17:14

基于Spring Boot的宠物猫认养系统的设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/8/19 22:58:42

开源！速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器

开源！速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器目录开源！速度100Kb/s的有线和无线双模ESP32S3芯片的DAP-Link调试器本项目未经授权，禁止商用！本项目未经授权，禁止商用！本项目未经授权&…...

编程日记 2025/8/19 9:27:44

Vue3 模板引用：打破数据驱动的次元壁（附高阶玩法）

在数据驱动的Vue世界中，模板引用（Template Refs）是我们与真实DOM对话的秘密通道。本文将带你深入理解这个"逃生舱"的正确打开方式，并分享实战中的高阶技巧。一、基础入门：建立DOM连接 1. 创建模板引用 &…...

编程日记 2025/8/15 15:10:11

第五天 Labview数据记录（5.5 SQL数据库读写）

5.5 SQL数据库读写 SQL 数据库读写操作是现代软件开发、数据分析和企业信息系统的核心功能。其意义不仅体现在技术层面，还涉及到业务流程优化、数据管理、决策支持等多个方面。以下是 SQL 数据库读写操作的重要意义：1. 数据存储与管理；2. 支…...

编程日记 2025/8/16 9:54:40

微信小程序项目引入图片问题：Error: module ‘assets/img/topImg.jpg.js‘ is not defined

问题与处理策略问题描述在微信小程序项目中，通过 require 引入图片文件，报如下错误 Error: module assets/img/topImg.jpg.js is not defined, require args is ../../assets/img/topImg.jpg# 翻译错误：未定义模块“assets/img/topImg.…...

编程日记 2025/8/19 11:46:36

02C#基本结构篇（D4_注释-访问修饰符-标识符-关键字-运算符-流程控制语句）

目录一、注释 1. 单行注释 2. 多行注释 3. XML文档注释 4. 使用建议和最佳实践： 二、访问修饰符 1. public 2. private 3. protected 4. internal 5. protected internal 或 protected and internal 6. private protected 或 private and protected 7.…...

编程日记 2025/8/21 11:15:14

Python：正则表达式

正则表达式的基础和应用一、正则表达式核心语法（四大基石） 1. 元字符（特殊符号） 定位符 ^：匹配字符串开始位置 $：匹配字符串结束位置 \b：匹配单词边界（如 \bword\b 匹配…...

编程日记 2025/8/16 12:09:07

ChatGPT4.5详细介绍和API调用详细教程

OpenAI在2月27日发布GPT-4.5的研究预览版——这是迄今为止OpenAI最强大、最出色的聊天模型。GPT-4.5在扩大预训练和微调规模方面迈出了重要的一步。通过扩大无监督学习的规模，GPT-4.5提升了识别内容中的模式、建立内容关联和生成对于内容的见解的能力，但…...

编程日记 2025/8/21 10:54:27

linux makefile tutorial

一个makefile的教程，几个小时就能看完，对makefile有个总体加细节的系统了解，非常不错： Learn Makefiles With the tastiest examples 中文翻译版： 起步 - Makefile 教程 (gavinliu6.github.io) gcc官网手册&#x…...

编程日记 2025/8/21 10:54:28

学习C2CRS Ⅲ (Response Generation Module)

代码地址：https://github.com/RUCAIBox/WSDM2022-C2CRS 论文地址：https://arxiv.org/abs/2201.02732 CFSelectionConvModel模型结构与功能 CFSelectionConvModel 是一个用于对话推荐系统的端到端模型，结合了知识图谱（KG）、评论信息和对话上下文来生成对话响应。它通过以…...

编程日记 2025/8/21 10:56:00

SpringBoot全栈开发：从数据库到Markdown文件导出的终极实践指南

一、SpringBoot后端核心实现 1.1 数据库数据转MD文件通过SpringBoot实现数据库内容导出为Markdown文件，是文档自动化生成的关键技术： GetMapping("/download") public void exportMd(HttpServletResponse response, Integer id) {Content …...

编程日记 2025/8/20 11:58:57

go函数详解

1.简介函数是组织好的、可重复使用的，用于执行指定任务的代码块，为了完成某一个功能的程序指令的集合，称为函数。go语言中支持：函数、匿名函数和闭包。 2.函数的定义 func 函数名 (形参列表) (返回值列表){ 函数体 return …...

编程日记 2025/8/19 20:29:14

MVCC实现原理

一、引言在现代数据库管理系统中，数据的一致性和并发性是两个至关重要的特性。传统的锁机制虽然有效，但也存在着性能瓶颈，特别是在高并发环境下，锁的争用会导致系统响应时间变慢，甚至引发死锁等问题。为了克服这些挑…...

编程日记 2025/8/20 6:40:32

通过Golang的container/list实现LRU缓存算法

文章目录力扣：146. LRU 缓存主要结构 List 和 Element常用方法1. 初始化链表2. 插入元素3. 删除元素4. 遍历链表5. 获取链表长度使用场景注意事项源代码阅读在 Go 语言中，container/list 包提供了一个双向链表的实现。链表是一种常见的数据结构&#…...

编程日记 2025/8/18 16:53:06

网络编程7天学java

* 网络编程：两台或两台以上的主机构成一个网络 * IP地址：标志网络中的一个通信实体的地址 * 端口号：区分不同应用程序 * 网络通信协议：ISO参考模型（7层），TCP/IP协议（4层）…...

编程日记 2025/8/16 9:44:26

在 IntelliJ IDEA 中配置 Git

1. 确保已安装 Git 在配置之前，确保你的系统已经安装了 Git。检查是否已安装 Git： bash 复制 git --version 如果未安装，请前往 Git 官网下载并安装。 2. 在 IntelliJ IDEA 中配置 Git 打开 IntelliJ IDEA。进入设置： Windo…...

编程日记 2025/8/21 1:31:50

【Godot4.4】Rect2总结

概述 Rect2是2D场景中比较重要的一种数据类型。 Rect2的本质含义是2D场景的轴对齐包围盒，而不是可以自由变换的矩形。 Rect2提供了一些方法，可以方便的判断Rect2之间是否重叠、包含等，并可以获得重叠的区域。也可以获得两个Rect2的包围盒。…...

编程日记 2025/8/21 10:55:59

git使用命令总结

文章目录 Git 复制创建提交步骤Git 全局设置:创建 git 仓库:已有仓库? 遇到问题解决办法：问题一先git pull一下，具体流程为以下几步： 详细步骤 Git 复制 git clone -b RobotModelSetting/develop https://gitlab.123/PROJECT/123.git创建提…...

编程日记 2025/8/16 10:36:29

Unity DOTS从入门到精通之 C# Job System

文章目录前言安装 DOTS 包C# 任务系统Mono 环境DOTS 环境运行作业NativeContainer 前言作为 DOTS 教程，我们将创建一个旋转立方体的简单程序，并将传统的 Unity 设计转换为 DOTS 设计。 Unity 2022.3.52f1Entities 1.3.10 安装 DOTS 包要安装 DOTS…...

编程日记 2025/8/20 23:46:16

linux下的网络抓包(tcpdump)介绍

linux下的网络抓包[tcpdump]介绍前言tcpdump1. 安装 tcpdump2. 基本抓包命令3. 过滤器使用4. 保存捕获的数据包异常指标1. 连接建立与断开相关指标异常 SYN 包异常 FIN 或 RST 包 2. 流量相关指标异常流量峰值异常源或目的 IP 流量 3. 端口相关指标异常端口使用端口扫描 4. 数…...

编程日记 2025/8/16 13:04:49

深入理解 Linux 中的 -h 选项：让命令输出更“人性化”

在 Linux 系统中，命令行工具是系统管理员和普通用户最常用的交互方式之一。然而，命令行输出往往充满了技术性术语和数字，对于初学者或非技术用户来说可能显得晦涩难懂。幸运的是，许多 Linux 命令都提供了一个非常实用的选项&#…...

编程日记 2025/8/16 12:55:12

selenium的鼠标操作

1、鼠标操作鼠标时间对应的方法在那个类中？ ActionChains类,实例化鼠标对象 1、context_click(element) # 右击 2、double_click(element) #双击 3、double_and_drop(source, target) # 拖拽 4、move_to_element(element) # 悬停【重点】 5、perform() …...

编程日记 2025/8/18 10:44:46

STM32——GPIO介绍

GPIO（General-Purpose IO ports，通用输入/输出接口）模块是STM32的外设接口的核心部分，用于感知外界信号（输入模式）和控制外部设备（输出模式），支持多种工作模式和配置选项。 1、GPIO 基本结构 STM32F407 的每个 GPIO 引脚均可独立配置，主要特性包括： 9 组 GPIO 端口…...

编程日记 2025/8/21 7:02:47

Word 小黑第15套

对应大猫16 修改样式集导航 -查找第一章标题不显示再选中文字点击标题一修改标题格式格式 -段落 -换行和分页勾选与下段同页添加脚注 （脚注默认位于底部 ）在脚注插入文档属性： -插入 -文档部件 -域类别选择文档信息，域…...

编程日记 2025/8/21 4:28:02

linux自启动服务

在Linux环境中，systemd是一个系统和服务管理器，它为每个服务使用.service文件进行配置。systemctl是用于控制系统服务的主要工具。本文将详细介绍如何使用systemctl来管理vsftpd服务，以及如何设置服务自启动。使用Systemd设置自启动服务创…...

编程日记 2025/8/21 10:57:24

react使用拖拽，缩放组件，采用react-rnd解决 -完整版

屏幕录制2025-03-10 10.16.06 以下代码仅提供左侧可视化区域右侧数据根据你们的存储数据来大家直接看Rnd标签设置的属性即可！！！！！ /*** 用户拖拽水印的最终位置信息*/ export interface ProductWatermarkValue {wat…...

编程日记 2025/8/15 22:22:03

通过 ElasticSearch的Python API和`curl` 命令获取Elasticsearch 所有索引名称

导言在大数据管理和实时搜索场景中，Elasticsearch 是一款不可或缺的工具。无论是开发调试、数据维护，还是系统监控，快速列出所有索引名称都是一个高频需求。本文将手把手教你如何通过 Python 客户端连接 Elasticsearch，并用两种方…...

编程日记 2025/8/21 6:41:45

Flutter：StatelessWidget vs StatefulWidget 深度解析

目录 1. 引言 2. StatelessWidget（无状态组件） 2.1 定义与特点 2.2 代码示例 3. StatefulWidget（有状态组件） 3.1 定义与特点 3.2 代码示例 4. StatelessWidget vs StatefulWidget 对比 5. StatefulWidget 生命周期 5.1…...

编程日记 2025/8/21 11:15:13

[密码学实战]Java实现国密TLSv1.3单向认证

一、代码运行结果 1.1 运行环境 1.2 运行结果 1.3 项目架构二、TLS 协议基础与国密背景 2.1 TLS 协议的核心作用 TLS（Transport Layer Security）是保障网络通信安全的加密协议，位于 TCP/IP 协议栈的应用层和传输层之间，提供： • 数据机密性：通过对称加密算法（如 AE…...

编程日记 2025/8/16 9:54:15

蓝桥杯省赛真题C++B组2024-握手问题

一、题目【问题描述】小蓝组织了一场算法交流会议，总共有 50 人参加了本次会议。在会议上，大家进行了握手交流。按照惯例他们每个人都要与除自己以外的其他所有人进行一次握手(且仅有一次)。但有 7 个人，这 7 人彼此之间没有进行握手(但这…...

编程日记 2025/8/20 17:07:09

项目实操分享：一个基于 Flask 的音乐生成系统，能够根据用户指定的参数自动生成 MIDI 音乐并转换为音频文件

在线体验音乐创作：AI Music Creator - AI Music Creator 体验者账号密码admin/admin123 系统架构 1.1 核心组件 MusicGenerator 类负责音乐生成的核心逻辑包含 MIDI 生成和音频转换功能管理音乐参数和音轨生成 FluidSynth 集成用于 MIDI 到音频的转换 …...

编程日记 2025/8/16 12:36:57

Java开发者如何接入并使用DeepSeek

目录一、准备工作二、添加DeepSeek SDK依赖三、初始化DeepSeek客户端四、数据上传与查询五、数据处理与分析六、实际应用案例七、总结【博主推荐】：最近发现了一个超棒的人工智能学习网站，内容通俗易懂，风格风趣幽默&#xff…...

编程日记 2025/8/19 23:09:44

多方安全计算(MPC)电子拍卖系统

目录一、前言二、多方安全计算(MPC)与电子拍卖系统概述2.1 多方安全计算(MPC)的基本概念2.2 电子拍卖系统背景与需求三、MPC电子拍卖系统设计原理3.1 系统总体架构3.2 电子拍卖中的安全协议3.3 数学与算法证明四、数据加解密模块设计五、GPU加速与系统性能优化六、GUI设计与系…...

编程日记 2025/8/16 9:54:23

【数据库系统概论】第十一章并发控制

第十一章并发控制 11.1 并发控制概述（1）丢失修改（2）不可重复读（3）读“脏”数据 11.2 封锁11.2.1 封锁的概念11.2.2 基本封锁类型（1）排它锁/X锁/写锁（2）共享锁…...

编程日记 2025/8/16 10:00:38

C语言_数据结构总结4：不带头结点的单链表

纯C语言代码，不涉及C 0. 结点结构 typedef int ElemType; typedef struct LNode { ElemType data; //数据域 struct LNode* next; //指针域 }LNode, * LinkList; 1. 初始化不带头结点的初始化，即只需将头指针初始化为NULL即可 void Init…...

编程日记 2025/8/16 9:54:17

用CSS画一条0.5px的线

上次面试前端被问到了这个问题，感觉有点懵懵的，我就回答了一个scaleY(0.5),这个是真的没想到，希望有需要的朋友可以去看看。随便记住一种就行。 1.第一种方式：通过缩放1px的线条实现视觉上的0.5px效果，兼容性较好。 …...

编程日记 2025/8/18 21:36:49

知识库全链路交互逻辑

阶段顺序 URL输入 → 网络连接 → 前端请求 → 后端处理 → 数据库交互 → 数据返回 → 前端渲染 → 连接关闭阶段1：用户输入URL 用户行为：在浏览器地址栏输入 https://knowledge.com/search?keyword金融趋势浏览器动作： “浏览器解析U…...

编程日记 2025/8/20 2:11:14

BambuStudio学习笔记：Model

# Model.hpp 核心模型结构说明## 文件概述该头文件定义了3D打印数据处理的核心数据结构，包含模型对象、体积、实例、材料等关键类。主要功能包括： - 三维模型数据存储与管理 - 模型变换操作（平移/旋转/缩放） - 打印参数配置 - 多…...

编程日记 2025/8/16 11:36:08

Spring （八）AOP-切面编程的使用

目录实现步骤： 1 导入AOP依赖 2 编写切面Aspect 3 编写通知方法 4 指定切入点表达式 5 测试AOP动态织入图示： 一实现步骤： 1 导入AOP依赖 <dependency><groupId>org.springframewor…...

编程日记 2025/8/18 19:46:48

【Go每日一练】构建一个简单的用户信息管理系统

👻创作者：丶重明 👻创作时间：2025年3月7日 👻擅长领域：运维目录 1.😶‍🌫️题目：简单的用户信息管理系统2.😶‍🌫️代码开发3.😶‍&a…...

编程日记 2025/8/19 17:11:38

PathRAG：通过图剪枝的方法优化Graph-based RAG的性能方法浅析

PathRAG 也是一种新型 Graph-based RAG 方法，通过检索索引图中的关键关系路径，减少噪声并优化 LLM 提示。其核心创新在于基于流的剪枝算法和路径为基础的提示策略，特别适用于捕捉复杂数据集中的关系。（其实可以看做相比GraphRAG假…...

编程日记 2025/8/17 16:42:53

ElementUI 级联选择器el-cascader启用选择任意一级选项，选中后关闭下拉框

1、启用选择任意一级选项在 el-cascader 标签上加上配置项： :props"{ checkStrictly: true }"例如： <el-cascaderref"selectedArrRef"v-model"selectedArr":options"optionsList":props"{ checkStri…...

编程日记 2025/8/16 9:54:31

【软件逆向】QQ 连连看小游戏去广告与一键消除实现

目录一、背景介绍二、去广告实现 2.1 分析广告加载流程 2.2 逆向分析广告加载逻辑 2.3 去广告方案三、一键消除外挂实现 3.1 分析游戏逻辑 3.2 编写外挂插件 3.3 注入外挂： 四、一键消除效果展示五、额外扩展一、背景介绍 QQ 连连看是一款经典的休闲…...

编程日记 2025/8/16 10:01:40

vue el-select 省市区三级联动 vue + element-ui使用第三方插件实现省市区三级联动

vue el-select 省市区三级联动 vue使用第三方插件实现省市区三级联动网上找了好多教程，都是使用el-cascader级联选择器的省市区选择器，但是几乎没有三个单独的el-select的进行关联的三级省市联动组件效果第一步:先安装省市区element-ui的插件 npm install element-china-a…...

编程日记 2025/8/21 2:53:06