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

JavaScript防抖与节流

news 来源：原创 2025/9/18 1:25:29

防抖（Debounce）

一、防抖的定义

二、防抖的实现原理

三、防抖的代码实现

四、代码解析

五、使用示例

1. 输入框实时搜索（延迟执行模式）

2. 按钮防重复点击（立即执行模式）

六、总结

节流（Throttle）

一、节流的定义

二、节流的实现原理

三、节流的代码实现

1. 时间戳方式（立即执行）

2. 定时器方式（延迟执行）

3. 结合时间戳和定时器（首尾均执行）

四、代码解析

五、使用示例

1. 滚动事件节流（时间戳方式）

2. 按钮防重复点击（定时器方式）

六、总结

对比：防抖 vs 节流

源码解析

一、_.throttle() 源码解析

1. 核心逻辑

2. 关键源码步骤

3. 核心特性

二、_.debounce() 源码解析

1. 核心逻辑

2. 关键源码步骤

3. 核心特性

防抖（Debounce）

一、防抖的定义

防抖是一种 优化高频触发事件 的技术，其核心思想是：在事件被频繁触发时，只有最后一次操作会被执行，中间的触发会被忽略。

典型场景：输入框实时搜索、窗口大小调整、滚动事件等需要限制执行频率的场景。
核心目标：减少不必要的计算或请求，提升性能和用户体验。

二、防抖的实现原理

防抖的底层实现依赖以下技术点：

定时器（setTimeout 和 clearTimeout）：用于控制事件触发的延迟时间。
闭包（Closure）：保存定时器状态，确保多次触发时能共享同一个定时器。
函数包装：将原始函数包装成防抖函数，返回一个新函数供事件调用。

三、防抖的代码实现

以下是一个支持 立即执行 和 延迟执行 的通用防抖函数：

function debounce(func, wait, immediate = false) {let timeout = null;// 返回包装后的防抖函数return function (...args) {const context = this;// 如果定时器存在，清除之前的定时器（取消未执行的延迟操作）if (timeout) clearTimeout(timeout);if (immediate) {// 立即执行模式：首次触发立即执行，后续在 wait 时间内触发则重新计时const callNow = !timeout;timeout = setTimeout(() => {timeout = null; // 恢复可执行状态}, wait);if (callNow) func.apply(context, args);} else {// 延迟执行模式：最后一次触发后等待 wait 时间再执行timeout = setTimeout(() => {func.apply(context, args);}, wait);}};
}

四、代码解析

参数说明：
1. func：需要防抖的原始函数。
2. wait：防抖等待时间（单位：毫秒）。
3. immediate：是否立即执行（true 表示首次触发立即执行，后续触发需等待）。
闭包保存状态：
1. timeout 变量通过闭包保存定时器 ID，确保多次触发共享同一状态。
apply 方法的作用：
1. 确保原始函数 func 的 this 指向正确（指向触发事件的元素）。
2. 传递事件参数（如 event 对象）。
两种模式的区别：
1. 立即执行模式：首次触发立即执行函数，之后在 wait 时间内再次触发会重新计时，直到停止触发超过 wait 时间后，才能再次立即执行。
2. 延迟执行模式：每次触发都会重置计时，只有最后一次触发后等待 wait 时间才会执行。

五、使用示例

1. 输入框实时搜索（延迟执行模式）

<input type="text" id="searchInput" /><script>const searchInput = document.getElementById('searchInput');// 原始搜索函数function search(query) {console.log('搜索关键词:', query);}// 防抖处理（延迟执行）const debouncedSearch = debounce(search, 500);// 绑定输入事件searchInput.addEventListener('input', function (e) {debouncedSearch(e.target.value);});
</script>

2. 按钮防重复点击（立即执行模式）

<button id="submitBtn">提交</button><script>const submitBtn = document.getElementById('submitBtn');// 原始提交函数function submitForm() {console.log('表单已提交');}// 防抖处理（立即执行）const debouncedSubmit = debounce(submitForm, 1000, true);// 绑定点击事件submitBtn.addEventListener('click', debouncedSubmit);
</script>

六、总结

防抖的核心逻辑：通过定时器和闭包控制高频事件的执行时机。
实现要点：
- 使用 setTimeout 和 clearTimeout 管理延迟。
- 通过闭包保存定时器状态。
- 处理 this 指向和参数传递。
应用场景：
- 输入框实时搜索建议。
- 窗口大小调整后的布局计算。
- 防止按钮重复提交。

节流（Throttle）

一、节流的定义

节流是一种 限制高频触发事件执行频率 的技术，其核心思想是：在事件被频繁触发时，固定时间间隔内只执行一次操作，忽略中间的触发。

典型场景：滚动事件、鼠标移动事件（如拖拽）、窗口大小调整、按钮频繁点击等。
核心目标：在保证功能正常的前提下，降低事件处理频率，优化性能。

二、节流的实现原理

节流的底层实现依赖以下技术点：

定时器（setTimeout 和 clearTimeout）或时间戳：用于控制事件触发的间隔时间。
闭包（Closure）：保存计时器状态，确保多次触发时能共享同一状态。
函数包装：将原始函数包装成节流函数，返回一个新函数供事件调用。

三、节流的代码实现

以下是两种常见的节流实现方式：

1. 时间戳方式（立即执行）

首次触发立即执行，之后在固定间隔内忽略后续触发。

function throttle(func, wait) {let previous = 0; // 上次执行时间戳return function (...args) {const now = Date.now();const context = this;if (now - previous > wait) {func.apply(context, args);previous = now; // 更新执行时间戳}};
}

2. 定时器方式（延迟执行）

首次触发后等待固定时间执行，之后在固定间隔内忽略后续触发。

function throttle(func, wait) {let timeout = null;return function (...args) {const context = this;if (!timeout) {timeout = setTimeout(() => {timeout = null; // 重置定时器func.apply(context, args);}, wait);}};
}

3. 结合时间戳和定时器（首尾均执行）

首次触发立即执行，最后一次触发在间隔结束后再执行一次。

function throttle(func, wait) {let previous = 0;let timeout = null;return function (...args) {const context = this;const now = Date.now();const remaining = wait - (now - previous);if (remaining <= 0) {// 立即执行if (timeout) {clearTimeout(timeout);timeout = null;}func.apply(context, args);previous = now;} else if (!timeout) {// 设置最后一次执行的定时器timeout = setTimeout(() => {func.apply(context, args);timeout = null;previous = Date.now();}, remaining);}};
}

四、代码解析

参数说明：
- func：需要节流的原始函数。
- wait：节流间隔时间（单位：毫秒）。
闭包保存状态：
- previous（时间戳方式）或 timeout（定时器方式）通过闭包保存状态，确保多次触发共享同一计时器。
apply 方法的作用：
- 确保原始函数 func 的 this 指向正确（如事件触发的元素）。
- 传递事件参数（如 event 对象）。
不同实现方式的区别：
- 时间戳方式：立即响应首次触发，适合需要即时反馈的场景（如按钮点击）。
- 定时器方式：延迟响应首次触发，适合连续触发但不需要立即执行的场景（如滚动事件）。
- 结合方式：兼顾首尾执行，适用于需要更平滑响应的场景（如动画）。

五、使用示例

1. 滚动事件节流（时间戳方式）

<div id="scrollArea" style="height: 2000px;"></div><script>const scrollArea = document.getElementById('scrollArea');// 原始滚动处理函数function handleScroll() {console.log('滚动位置:', window.scrollY);}// 节流处理（时间戳方式）const throttledScroll = throttle(handleScroll, 200);// 绑定滚动事件window.addEventListener('scroll', throttledScroll);
</script>

2. 按钮防重复点击（定时器方式）

<button id="clickBtn">点击</button><script>const clickBtn = document.getElementById('clickBtn');// 原始点击处理函数function handleClick() {console.log('按钮点击');}// 节流处理（定时器方式）const throttledClick = throttle(handleClick, 1000);// 绑定点击事件clickBtn.addEventListener('click', throttledClick);
</script>

六、总结

节流的核心逻辑：通过时间戳或定时器控制高频事件的执行频率。
实现要点：
- 使用 Date.now() 或 setTimeout 管理间隔时间。
- 通过闭包保存计时器或时间戳状态。
- 处理 this 指向和参数传递。
应用场景：
- 滚动事件触发加载更多内容。
- 鼠标移动时更新元素位置（如拖拽）。
- 防止按钮频繁点击导致的重复提交。

对比：防抖 vs 节流

1. 防抖（debounce）

所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间

//防抖简单写法
function debounce(func, t) {let timer = nullreturn function () {if (timer) {clearTimeout(timer)}timer = setTimeout(() => func(), t)}
}

2. 节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数

//节流简单写法
function throttle(func, t) {let timer = nullreturn function () {if (!timer) {timer = setTimeout(() => {func()timer = null}, t)}}
}

3. 对比：

特性	防抖（Debounce）	节流（Throttle）
触发频率	最后一次触发后等待 `wait` 时间执行	固定时间间隔内最多执行一次
适用场景	输入框搜索、窗口大小调整	滚动事件、鼠标移动事件、频繁点击按钮
核心目标	确保高频触发时只执行一次	确保高频触发时按固定频率执行

源码解析

一、`_.throttle()` 源码解析

1. 核心逻辑

节流函数确保在 wait 时间间隔内最多执行一次 func，支持首次（leading）和末次（trailing）执行控制。

2. 关键源码步骤

_.throttle(func, [wait=0], [options={}])

function throttle(func, wait, options) {let leading = true;let trailing = true;// 参数处理if (typeof options === 'object') {leading = 'leading' in options ? !!options.leading : leading;trailing = 'trailing' in options ? !!options.trailing : trailing;}let lastArgs, lastThis, result;let timeout = null;let previous = 0;const throttled = function(...args) {const now = Date.now();// 首次调用且不执行 leading 时，设置 previous 为 nowif (!previous && leading === false) previous = now;// 计算剩余时间const remaining = wait - (now - previous);// 需要执行（剩余时间 <=0 或系统时间被修改）if (remaining <= 0 || remaining > wait) {if (timeout) {clearTimeout(timeout);timeout = null;}previous = now;result = func.apply(this, args);} else if (!timeout && trailing !== false) {// 设置尾调用的定时器timeout = setTimeout(() => {previous = leading === false ? 0 : Date.now();timeout = null;result = func.apply(lastThis, lastArgs);}, remaining);}return result;};// 提供取消方法throttled.cancel = function() {clearTimeout(timeout);previous = 0;timeout = lastArgs = lastThis = null;};return throttled;
}

3. 核心特性

时间戳与定时器结合：既保证首次触发立即响应（leading），又在停止触发后执行最后一次（trailing）。
系统时间篡改兼容：检测到 remaining > wait 时强制触发。
取消机制：允许手动取消未执行的尾调用。

二、`_.debounce()` 源码解析

1. 核心逻辑

防抖函数在连续触发时，仅在最后一次触发后等待 wait 时间执行一次 func，支持立即执行模式（leading）。

2. 关键源码步骤

_.debounce(func, [wait=0], [options={}])

function debounce(func, wait, options) {let lastArgs, lastThis, result;let timerId = null;let lastCallTime = 0;let leading = false;let maxing = false;let maxWait;// 参数处理if (typeof options === 'object') {leading = !!options.leading;maxing = 'maxWait' in options;maxWait = maxing ? Math.max(options.maxWait || 0, wait) : maxWait;}const invokeFunc = (time) => {const args = lastArgs;const thisArg = lastThis;lastArgs = lastThis = undefined;result = func.apply(thisArg, args);return result;};const leadingEdge = (time) => {// 记录最后一次调用时间lastCallTime = time;// 设置定时器timerId = setTimeout(timerExpired, wait);// 立即执行模式return leading ? invokeFunc(time) : result;};const shouldInvoke = (time) => {// 判断是否需要执行（超过 wait 或 maxWait）const timeSinceLastCall = time - lastCallTime;return (lastCallTime === 0) || (timeSinceLastCall >= wait) || (maxing && timeSinceLastCall >= maxWait);};const debounced = function(...args) {const time = Date.now();lastArgs = args;lastThis = this;// 判断是否应该执行const isInvoking = shouldInvoke(time);if (isInvoking) {// 清除已有定时器if (timerId === null) {return leadingEdge(time);}// 处理 maxWait 场景if (maxing) {timerId = setTimeout(timerExpired, wait);return invokeFunc(time);}}// 设置/重置定时器if (timerId === null) {timerId = setTimeout(timerExpired, wait);}return result;};// 提供取消和立即执行方法debounced.cancel = function() { /* ... */ };debounced.flush = function() { /* ... */ };return debounced;
}

3. 核心特性

maxWait 支持：确保在超时后强制执行，避免长期不触发导致的延迟。
立即执行模式：leading 选项允许首次触发立即执行。
灵活控制：cancel 和 flush 方法提供外部控制能力。

JavaScript防抖与节流

目录防抖（Debounce） 一、防抖的定义二、防抖的实现原理三、防抖的代码实现四、代码解析五、使用示例 1. 输入框实时搜索（延迟执行模式） 2. 按钮防重复点击（立即执行模式） 六、总结节流&…...

编程日记 2025/9/18 1:25:29

Java网络编程实战（多人聊天室-CS模式）

一、C/S模式核心原理 1.1 基本架构 C/S（Client/Server）模式采用客户端-服务器架构： 服务器端：持续运行，负责消息路由和广播客户端：用户交互界面，连接服务器进行通信通信协议：TCP&…...

编程日记 2025/9/15 20:33:54

Vue3.5 + Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类

Vue3.5 Vite6.x 项目的完整 Stylelint 配置方案，支持 .vue/.html 内联样式、Less/SCSS/CSS 等多种文件类型一、完整依赖安装 npm install --save-dev stylelint stylelint-config-standard postcss-html # 解析 Vue/HTML 文件中的样式postcss-scss …...

编程日记 2025/9/12 4:11:58

23种设计模式Java版（带脑图，带示例源码）

设计模式 1、创建型 1.1、单例模式(Singleton pattern) 确保一个类只有一个实例，并提供该实例的全局访问点。 1.2、工厂方法(Factory Method) 它定义了一个创建对象的接口，但由子类决定要实例化哪个类。工厂方法把实例化操作推迟到子类。 1.3、抽象…...

编程日记 2025/8/30 21:40:51

mapbox高阶，使用graphology、graphology-shortest-path前端插件和本地geojson数据纯前端实现路径规划

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：mapbox 从入门到精通文章目录一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️graphology 插件1.3.1 ☘️概念1.3.2 ☘…...

编程日记 2025/9/17 5:05:25

【已解决】vscode升级后连接远程异常：“远程主机可能不符合XXX的先决条件”解决方法

vscode提示升级，每次都升了，突然某次关闭后无法连接远程，查询资料是因为从VS Code 1.86.1版本开始（2024年1月）要求glibc版本>2.28。命令“ ldd --version”可查看glibc版本为2.27： rootXXXXXXX:~$ ld…...

编程日记 2025/9/13 0:07:24

Springboot整合JAVAFX

Springboot整合JAVAFX 实体与VO设计 pom.xml文件如下： <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xs…...

编程日记 2025/9/17 10:17:04

【算法】——一键解决动态规划

前言动态规划是一种高效解决重叠子问题和最优子结构问题的算法思想。它通过分治记忆化，将复杂问题分解为子问题，并存储中间结果，避免重复计算，从而大幅提升效率。为什么重要？ 优化…...

编程日记 2025/9/17 14:20:57

Git使用与管理

一.基本操作 1.创建本地仓库在对应文件目录下进行： git init 输入完上面的代码，所在文件目录下就会多一个名为 .git 的隐藏文件，该文件是Git用来跟踪和管理仓库的。我们可以使用 tree 命令（注意要先下载tree插件&#xff09…...

编程日记 2025/9/10 20:53:30

npm、nvm、nrm

NVM (Node Version Manager) 常见指令 NVM 是一个用于管理 Node.js 版本的流行工具，允许你在同一台机器上安装和切换不同版本的 Node.js。以下是 NVM 的常见指令： 安装与卸载 nvm install <version> - 安装指定版本的 Node.js 例如：…...

编程日记 2025/9/11 22:53:41

Java 文件内容转换为MD5哈希值

若要把读取到的 files 列表里的内容转换为 MD5 哈希值，你可以逐个遍历 files 列表中的元素，将每个元素的内容计算成 MD5 哈希值。以下是一个完整的 Java 示例代码，展示了如何实现这一功能： import java.io.BufferedInputStream…...

编程日记 2025/9/11 4:19:12

未来郴州：科技与自然的交响诗篇

故事背景故事发生在中国湖南郴州，描绘了未来城市中科技与自然共生共荣的奇妙图景。通过六个充满诗意的场景，展现雾能转化系统、立体生态书库、智能稻田等创新设计，编织出一曲人类智慧与自然韵律共鸣的未来交响。故事内容在东江湖的晨雾中&…...

编程日记 2025/9/8 15:34:04

UE5 运行时动态将玩家手部模型设置为相机的子物体

在编辑器里，我们虽然可以手动添加相机，但是无法将网格体设置为相机的子物体，只能将相机设置为网格体的子物体但是为了使用方便，我们希望将网格体设置为相机的子物体，这样我们直接旋转相机就可以旋转网格体&#xff0…...

编程日记 2025/9/2 14:18:04

Ubuntu系统下的包管理器APT

Ubuntu系统下的包管理器APT 在Linux操作系统生态中，软件包管理工具是连接用户与系统功能的桥梁。Ubuntu作为基于Debian的流行发行版，其强大的包管理系统APT（Advanced Packaging Tool）为开发者与系统管理员提供了便捷的软件生命周…...

编程日记 2025/9/16 9:36:39

超级码科技发布镂空AI保险胶带，重塑包装防伪新标准

在酒类、物流、奢侈品、电子产品等领域，包装安全与防伪需求日益迫切。传统封箱胶带易被转移或重复利用，导致商品被仿冒的风险居高不下。为此，超级码科技推出镂空型防揭AI数字身份保险封箱胶带——一款集结构防伪、信息追踪与增值服务于一体的…...

编程日记 2025/9/12 3:43:27

微软Exchange管理中心全球范围宕机

微软已确认Exchange管理中心（Exchange Admin Center，EAC）发生全球性服务中断，导致管理员无法访问关键管理工具。该故障被标记为关键服务事件（编号EX1051697），对依赖Exchange Online的企业造成广…...

编程日记 2025/9/11 16:06:59

前端通信库fetch-event-source实现丰富的SSE

环境：SpringBoot3.4.0 + Vue3 1. 简介 SSE（Server-Sent Events）是一种基于HTTP的服务器向客户端单向推送实时数据的轻量级协议，配合浏览器原生EventSource API，可实现高效实时通信。前端通过创建EventSource对象订阅服务端流，自动处理连接、重试与数据解析；服务端设置C…...

编程日记 2025/9/10 21:25:05

JVM 中Minor GC、Major GC、Full GC 的区别？

Minor GC、Major GC 和 Full GC 是 Java 虚拟机 (JVM) 垃圾回收 (Garbage Collection) 中的不同类型的 GC 事件，它们在范围、触发条件、停顿时间等方面有所不同。 1. Minor GC (Young GC): 范围： 只针对新生代 (Young Generation) 进行垃圾回收。触发条…...

编程日记 2025/9/2 19:06:20

2747. 统计没有收到请求的服务器数目

文章目录题意思路代码题意题目链接思路代码 class Solution { public:vector<int> countServers(int n, vector<vector<int>>& logs, int x, vector<int>& queries) {sort(logs.begin(), logs.end(), [](vector<int> &a, v…...

编程日记 2025/9/7 1:26:35

设计模式：抽象工厂 - 掌控多产品族的创建之道

一、什么是抽象工厂模式？ 抽象工厂模式是一种创建型设计模式，提供一个接口，用于创建一系列相关或相互依赖的对象，而无需指定它们的具体类。核心思想 1.定义多个产品的抽象接口，统一管理具体产品和工厂的创建逻辑。…...

编程日记 2025/9/9 16:40:23

图神经网络+多模态：视频动作分割的轻量高效新解法

一、引言在智能监控、自动驾驶、人机交互等领域，准确理解视频中的动作序列至关重要。然而，传统方法依赖复杂的视觉模型，计算成本高且难以捕捉长时依赖。近期，一项名为 Semantic2Graph 的研究通过图神经网络（GNN&am…...

编程日记 2025/9/15 14:30:56

技术与情感交织的一生（五）

目录初入“江湖” 分工陌生 CraneOffice 内功宝典枪手回到大二通关小聚唱一首歌初入“江湖” 分工软件工作室是坐落在和平区宜昌道的一间民房，和我想象中的公司形象多少有些偏差。天津的道路有点凌乱，初次的时候不太好找&#xf…...

编程日记 2025/9/11 19:56:53

简单-快速-高效——模块化解析Pulid（实现不同风格下的人脸一致）

资源论文：https://arxiv.org/abs/2404.16022 github：https://github.com/ToTheBeginning/PuLID?tabreadme-ov-file comfyui插件：https://github.com/sipie800/ComfyUI-PuLID-Flux-Enhanced 讲解参考 https://zhuanlan.zhihu.com/p/69684…...

编程日记 2025/9/9 23:00:14

XYZ to xyY 求解

免责声明：本文所提供的信息和内容仅供参考。作者对本文内容的准确性、完整性、及时性或适用性不作任何明示或暗示的保证。在任何情况下，作者不对因使用本文内容而导致的任何直接或间接损失承担责任，包括但不限于数据丢失、业务中断或其他经济…...

编程日记 2025/9/12 6:42:59

科技自然的协奏曲-深圳

故事背景故事发生在中国广东深圳的现代城市环境，这里呈现出未来科技与自然生态共生的独特图景。没有具体的角色，却通过多样的场景描绘，展现出未来生活的活力与创新，反映出社会创新与人类情感的紧密结合。故事内容在未来的深…...

编程日记 2025/9/9 1:06:15

idea 创建 maven-scala项目

文章目录 idea 创建 maven-scala项目1、创建普通maven项目并且配置pom.xml文件2、修改项目结构1）创建scala目录并标记成【源目录】2）导入scala环境3）测试环境 idea 创建 maven-scala项目 1、创建普通maven项目并且配置pom.xml文件 maven依赖…...

编程日记 2025/9/15 19:44:45

C++项目：高并发内存池_下

目录 8. thread cache回收内存 9. central cache回收内存 10. page cache回收内存 11. 大于256KB的内存申请和释放 11.1 申请 11.2 释放 12. 使用定长内存池脱离使用new 13. 释放对象时优化成不传对象大小 14. 多线程环境下对比malloc测试 15. 调试和复杂问题的调试技…...

编程日记 2025/9/13 21:48:28

【UE5】RTS游戏的框选功能+行军线效果实现

目录效果步骤一、项目准备二、框选NPC并移动到指定地点三、框选效果四、行军线效果效果步骤一、项目准备 1. 新建一个俯视角游戏工程 2. 新建一个pawn、玩家控制器和游戏模式，这里分别命名为“MyPawn”、“MyController”和“MyGameMode” 3. 打开“MyGam…...

编程日记 2025/9/14 18:49:37

多图超详细：Docker安装知识库AI客服RAGFlow的详细步骤、使用教程及注意事项：

RAGFlow 介绍 RAGFlow 是一款基于深度文档理解的开源检索增强生成（RAG）引擎，通过结合信息检索与生成式 AI 技术，解决复杂场景下的数据处理和可信问答问题。其核心设计目标是提供透明化、可控化的文档处理流程，并通过多…...

编程日记 2025/9/10 3:07:21

docker compose安装智能体平台N8N

使用 docker volume create n8n_data 创建了一个名为 n8n_data 的数据卷。你通过 docker run 启动容器，映射了端口 5678，并挂载了 n8n_data 数据卷。以下是对应的 docker-compose.yml 配置文件： version: "3.7"services:n8n:ima…...

编程日记 2025/9/8 20:32:25

FRP调用本地摄像头完成远程拍照

from flask import Flask, Response import cv2app Flask(__name__)# 基础文字回复 app.route(/) def hello_world():return <h1>你好啊世界</h1><img src"/camera" width"640" /># 摄像头拍照并返回图像 app.route(/camera) def captu…...

编程日记 2025/9/7 1:26:37

【Linux】39.一个基础的HTTP Web服务器

文章目录 1. 实现一个基础的HTTP Web服务器1.1 功能实现：1.2 Log.hpp-日志记录器1.3 HttpServer.hpp-网页服务器1.4 Socket.hpp-网络通信器1.5 HttpServer.cc-服务器启动器 1. 实现一个基础的HTTP Web服务器 1.1 功能实现： 总体功能： 提供We…...

编程日记 2025/9/12 19:45:58

蓝桥杯-小明的背包(动态规划-Java)

0/1背包问题介绍 0/1背包问题是经典的动态规划问题，具体描述如下： 解题思路： 输入数据首先，程序通过 Scanner 从输入中读取数据： n 表示物品的数量。 v 表示背包的最大容量。接着读取每个物品的重量和价值&#xff…...

编程日记 2025/9/16 7:15:11

（四十一）Dart 中的空安全与 `late` 关键字教程

Dart 中的空安全与 late 关键字教程空安全简介空安全（Null Safety）是 Dart 语言的一项重要特性，旨在帮助开发者避免空指针异常（NullPointerException）。空安全通过在编译时检查变量是否可能为 null，从而…...

编程日记 2025/9/15 17:33:06

GaussDB使用指南

目录 1. GaussDB 概述 1.1 GaussDB 简介 1.2 核心技术架构 1.3 适用场景与行业案例 2. GaussDB 安装与部署 2.1 环境准备与依赖检查 2.2 单机版安装（Linux） 2.3 分布式集群部署 3. GaussDB 基础操作与语法 3.1 数据库连接与用户管理 3.2 DDL …...

编程日记 2025/9/13 6:59:29

算法训练之动态规划（一）

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…...

编程日记 2025/9/11 21:04:04

dubbo配置中心

配置中心简介配置中心（config-center）在dubbo中可承担两类职责： 外部化配置：启动配置的集中式存储。流量治理规则存储。 Dubbo动态配置中心定义了两个不同层次的隔离选项，分别是namespace和group。 namespace&a…...

编程日记 2025/9/9 10:50:50

移动端六大语言速记：第11部分 - 内存管理

移动端六大语言速记：第11部分 - 内存管理本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言在内存管理方面的特性，帮助开发者理解和掌握各语言的内存管理机制。 11. 内存管理 11.1 垃圾回收机制对比各语言垃圾回收…...

编程日记 2025/9/10 18:16:39

对象的创建方式有哪些?在虚拟机中具体的创建过程是怎样的？

在Java中，对象的创建方式及其在虚拟机中的具体过程如下： 一、对象的创建方式使用 new 关键字最常见的对象创建方式，直接调用类的构造方法。 MyClass obj new MyClass();反射（Reflection） 通过 Class 或 Constructor…...

编程日记 2025/9/14 3:17:02

openwrt软路由配置3

1.启用sftp文件连接使用ssh连接openwrt时，我发现无法打开sftp windows进行上传和下载文件，提示 sftp channel closed by server: stderr:ash /usr/libexec/sftp-server:not found 原因是系统刚刚装好后，没有安装openssh-sftp-server包 opk…...

编程日记 2025/9/5 15:51:35