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

节流和防抖的使用

news 来源：原创 2025/7/15 23:00:09

节流（Throttle）是一种常用的性能优化技术，用于限制函数的执行频率，确保在一定时间内只执行一次。它常用于处理浏览器事件（如滚动、窗口调整大小、鼠标移动等），以避免因事件触发过于频繁而导致的性能问题。

以下是手写节流函数的实现方法，以及一些常见的使用场景和注意事项。

节流函数的实现

节流函数的核心思想是：在指定的时间间隔内，只允许函数执行一次。以下是两种常见的节流实现方式

1. 时间戳版本（基于时间间隔）

function throttle(func, limit) {let lastFunc;let lastRan;return function () {const context = this;const args = arguments;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(lastFunc);lastFunc = setTimeout(function () {if (Date.now() - lastRan >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}

2. 定时器版本（基于固定时间间隔）

function throttle(func, limit) {let inThrottle;return function () {const args = arguments;const context = this;if (!inThrottle) {func.apply(context, args);inThrottle = true;setTimeout(() => (inThrottle = false), limit);}};
}

使用示例

1. 滚动事件

window.addEventListener('scroll', throttle(function () {console.log('Scrolling...');
}, 100));

2. 窗口调整大小

window.addEventListener('resize', throttle(function () {console.log('Resizing...');
}, 200));

注意事项

参数传递：
- 节流函数需要正确处理原函数的上下文（this）和参数（arguments），确保它们能够正确传递。
性能优化：
- 节流函数本身也会影响性能，因此需要合理设置时间间隔。
销毁定时器：
- 如果使用了定时器版本，记得在组件销毁时清除定时器，避免内存泄漏。

完整代码示例

以下是一个完整的节流函数实现，结合了时间戳和定时器的优点：

function throttle(func, limit) {let inThrottle;let lastRan;return function () {const args = arguments;const context = this;if (!lastRan) {func.apply(context, args);lastRan = Date.now();} else {clearTimeout(inThrottle);inThrottle = setTimeout(function () {if (Date.now() - lastRan >= limit) {func.apply(context, args);lastRan = Date.now();}}, limit - (Date.now() - lastRan));}};
}// 使用示例
window.addEventListener('scroll', throttle(function () {console.log('Scrolling...');
}, 100));

防抖（Debounce）是一种常用的性能优化技术，用于限制函数的执行频率。与节流（Throttle）不同，防抖的核心思想是：在指定的时间间隔内，只有最后一次触发事件时才执行函数。如果在时间间隔内再次触发事件，则重新计时。

防抖常用于以下场景：

输入框的搜索建议：避免用户输入时频繁触发搜索请求。
按钮点击：防止用户快速多次点击导致多次提交。
窗口调整大小：避免频繁触发布局调整。

以下是防抖函数的实现方法以及具体案例。

防抖函数的实现

防抖函数的实现相对简单，核心是利用 setTimeout 和 clearTimeout 来控制函数的执行。

基本实现

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

实现思路

每次触发事件时，清除之前的定时器。
设置一个新的定时器，延迟指定时间后执行目标函数。
如果在延迟时间内再次触发事件，则重新计时。

具体案例：输入框搜索建议

假设我们有一个输入框，用户输入时需要触发搜索建议。为了避免频繁触发搜索请求，可以使用防抖技术。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Debounce Example</title>
</head>
<body><input type="text" id="search-input" placeholder="Search..."><div id="suggestions"></div><script>// 防抖函数function debounce(func, delay) {let timeoutId;return function (...args) {const context = this;clearTimeout(timeoutId);timeoutId = setTimeout(() => {func.apply(context, args);}, delay);};}// 搜索建议函数function searchSuggestions(query) {console.log(`Searching for: ${query}`);const suggestions = document.getElementById('suggestions');suggestions.innerHTML = `<p>Showing suggestions for: ${query}</p>`;}// 获取输入框const input = document.getElementById('search-input');// 使用防抖绑定输入事件input.addEventListener('input', debounce((event) => {searchSuggestions(event.target.value);}, 500)); // 延迟 500 毫秒</script>
</body>
</html>

防抖的高级用法

1. 立即执行与延迟执行

防抖函数可以配置是否在第一次触发时立即执行，而不是延迟执行。以下是改进版的防抖函数：

function debounce(func, delay, immediate = false) {let timeoutId;return function (...args) {const context = this;const callNow = immediate && !timeoutId; // 是否立即执行clearTimeout(timeoutId);timeoutId = setTimeout(() => {if (!immediate) {func.apply(context, args); // 延迟执行}timeoutId = null;}, delay);if (callNow) {func.apply(context, args); // 立即执行}};
}

使用示例

// 延迟执行
input.addEventListener('input', debounce((event) => {searchSuggestions(event.target.value);
}, 500));// 立即执行
input.addEventListener('input', debounce((event) => {searchSuggestions(event.target.value);
}, 500, true));

与防抖的区别

节流和防抖都是用于限制函数执行频率的技术，但它们的实现和用途有所不同：

节流（Throttle） ：
- 在指定的时间间隔内，确保函数只执行一次。
- 适用于需要定期触发的场景（如滚动、窗口调整大小）。
防抖（Debounce） ：
- 在指定的时间间隔内，只有最后一次触发时才执行函数。
- 适用于需要延迟执行的场景（如输入框的搜索建议、按钮点击）

在 Vue 中使用：

<template><input type="text" v-model="inputValue" @input="debouncedInput" />
</template>export default {data() {return {inputValue: ""};},methods: {handleInput() {console.log("Debounced input:", this.inputValue);}},mounted() {this.debouncedInput = debounce(this.handleInput, 500);}
};

2. 使用 Lodash 的 `debounce throttle`

Lodash 是一个常用的 JavaScript 工具库，提供了现成的防抖函数

安装 Lodash：

npm install lodash

使用 debounce：

import { debounce } from "lodash";export default {data() {return {inputValue: ""};},methods: {handleInput() {console.log("Debounced input:", this.inputValue);}},mounted() {this.debouncedInput = debounce(this.handleInput, 500);}
};

模板绑定：

<input type="text" v-model="inputValue" @input="debouncedInput" />

使用 throttle：

<template><div><h1>Lodash 节流示例</h1><p>滚动页面查看节流效果</p></div>
</template><script>
import { throttle } from 'lodash';export default {name: 'LodashThrottleExample'methods: {handleScroll() {console.log('滚动事件触发');// 在这里添加你的滚动逻辑}},mounted() {// 使用 Lodash 的 throttle 函数this.throttledScroll = throttle(this.handleScroll, 200);window.addEventListener('scroll', this.throttledScroll);},beforeDestroy() {window.removeEventListener('scroll', this.throttledScroll);}
};
</script>

<template><div><h1>Lodash 节流示例</h1><p>滚动页面查看节流效果</p></div>
</template><script setup>
import { onMounted, onUnmounted } from 'vue';
import { throttle } from 'lodash';const handleScroll = () => {console.log('滚动事件触发');// 在这里添加你的滚动逻辑
};const throttledScroll = throttle(handleScroll, 200);onMounted(() => {window.addEventListener('scroll', throttledScroll);
});onUnmounted(() => {window.removeEventListener('scroll', throttledScroll);
});
</script>

3. 使用 Vue 组合式 API 封装防抖

Vue 3 的组合式 API 提供了更灵活的方式封装防抖逻辑。

封装 `useDebounce`：

import { ref } from "vue";export function useDebounce(cb, delay = 100) {const timer = ref(null);const handler = function (...args) {clearTimeout(timer.value);timer.value = setTimeout(() => {cb(...args);}, delay);};const cancel = () => {clearTimeout(timer.value);timer.value = null;};return { handler, cancel };
}

使用：

import { useDebounce } from "./useDebounce";export default {setup() {const { handler: debouncedInput } = useDebounce(() => {console.log("Debounced input");}, 500);return { debouncedInput };}
};

模板绑定：

<input type="text" @input="debouncedInput" />

4. 使用 Vue 指令封装防抖

将防抖逻辑封装为 Vue 自定义指令，方便在多个地方复用。

定义指令：

export default {inserted(el, binding) {const delay = binding.arg || 500;let timer;el.addEventListener("input", (e) => {clearTimeout(timer);timer = setTimeout(() => {binding.value(e);}, delay);});}
};

使用：

<input type="text" v-debounce:500="handleInput" />

5. 使用 VueUse 的 `useDebounce`

VueUse 是一个基于 Vue 3 的实用工具库，提供了 useDebounce 函数。

安装 VueUse：

npm install @vueuse/core

使用：

import { useDebounce } from "@vueuse/core";export default {setup() {const inputValue = ref("");const debouncedValue = useDebounce(inputValue, 500);return { inputValue, debouncedValue };}
};

模板绑定：

<input type="text" v-model="inputValue" />
<div>Debounced Value: {{ debouncedValue }}</div>

总结

如果项目中已经使用了 Lodash，可以直接使用 _.debounce。
如果需要更灵活的封装，可以使用 Vue 的组合式 API 或自定义指令。
对于 Vue 3 项目，推荐使用 VueUse 的 useDebounce，它提供了简洁的 API 和良好的性能。

节流和防抖的使用

节流（Throttle）是一种常用的性能优化技术，用于限制函数的执行频率，确保在一定时间内只执行一次。它常用于处理浏览器事件（如滚动、窗口调整大小、鼠标移动等），以避免因事件触发过于频繁而导致的…...

编程日记 2025/7/15 23:00:09

关于项目中优化使用ConcurrentHashMap来存储锁对象

方案介绍在开发用户创建私有空间功能时，我们的规则是一个用户最多只能创建一个私有空间。在最初方案中，我是采用字符串常量池的方式存储锁对象useID。通过intern方法保证同一用户ID的锁唯一性。这一方案存在的问题是： 随着userId越来越…...

编程日记 2025/7/9 10:09:44

Java 网络安全新技术：构建面向未来的防御体系

一、Java 安全架构的演进与挑战 1.1 传统安全模型的局限性 Java 平台自 1995 年诞生以来，安全机制经历了从安全管理器（Security Manager）到 Java 平台模块系统（JPMS）的演进。早期的安全管理器通过沙箱模型限制不可信…...

编程日记 2025/6/29 5:13:10

【在Spring Boot中集成Redis】

在Spring Boot中集成Redis 依赖在application.yml中配置Redis服务地址创建Redis配置类缓存工具类使用依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency&…...

编程日记 2025/7/15 22:59:16

昇腾的昇思MindSpore是什么？跟TensorFlow/PyTorch 等第三方框架有什么区别和联系？【浅谈版】

昇腾的昇思 MindSpore 是华为自主研发的全场景深度学习框架，旨在覆盖从科研到工业落地的全流程，支持云、边缘、手机等多种硬件场景的部署。它与 TensorFlow、PyTorch 等第三方框架既有相似性，也有明显差异。一、昇思 MindSpore 的核心特点全…...

编程日记 2025/7/15 22:58:38

MySQL进阶(三)

五、锁 1. 概述锁是计算机协调多个进程或线程并发访问某一资源的机制（避免争抢）。在数据库中，除传统的计算资源（如 CPU、RAM、I/O 等）的争用以外，数据也是一种供许多用户共享的资源。如何保证数据并发…...

编程日记 2025/6/29 8:11:54

Java面试趣事：从死循环到分段锁

互联网大厂Java开发岗终面现场面试官（推了推黑框眼镜）：马小帅是吧？先说下HashMap扩容机制？ 马小帅（抓耳挠腮）：这我知道！默认初始容量16，默认负载因子0.75..…...

编程日记 2025/6/29 7:47:22

健康养生新主张

健康养生并非遥不可及的高深学问，摒弃中医理念，从生活细节入手，同样能实现身心的良好养护，开启活力满满的生活。水是生命之源，科学饮水对养生意义重大。每天饮用 1500 - 2000 毫升的水，可维持身体正常的…...

编程日记 2025/6/29 5:28:18

合成复用原则（CRP）

非常好！你已经学习了好几个设计原则，现在我们来讲解合成复用原则（Composite Reuse Principle, CRP）——它和继承是常被比较的一对“重用方式”。 🧠 一句话定义合成复用原则（CRP）：尽…...

编程日记 2025/7/10 14:30:54

基于PyTorch的食物图像分类实战：从数据处理到模型训练

基于PyTorch的食物图像分类实战：从数据处理到模型训练在深度学习领域，图像分类是一个经典且应用广泛的任务。无论是在电商平台的商品分类、医疗影像诊断，还是在农业作物识别等场景中，图像分类模型都发挥着重要作用。本文将以食物…...

编程日记 2025/6/29 5:21:54

在pycharm profession 2020.3将.py程序使用pyinstaller打包成exe

一、安装pyinstaller 在pycharm的项目的Terminal中运行pip3 install pyinstaller即可。安装后在Terminal中输入pip3 list看一下是否成功二、务必在在项目的Terminal中输入命令打包，命令如下： python3 -m PyInstaller --noconsole --onefile xxx.py …...

编程日记 2025/6/29 7:27:43

基于Springboot旅游网站系统【附源码】

基于Springboot旅游网站系统效果如下： 系统登陆页面系统主页面景点信息推荐页面路线详情页面景点详情页面确认下单页面景点信息管理页面旅游路线管理页面研究背景随着互联网技术普及与在线旅游消费习惯的深化，传统旅游服务模式面临效率低、…...

编程日记 2025/6/29 5:13:11

Linux操作系统从入门到实战（五）详细讲解Linux权限概念

Linux操作系统从入门到实战（五）详细讲解Linux权限概念前言一、Linux中两种用户1.1 超级用户（root）1.2 普通用户1.3 切换用户命令二、Linux权限管理2.1 文件访问者的分类：谁能访问文件？2.2 文件类型2.3 基…...

编程日记 2025/6/29 5:13:08

[方法论]软件工程中的设计模式：从理论到实践的深度解析

文章目录软件工程中的设计模式：从理论到实践的深度解析引言：为什么需要设计模式？第一部分：设计模式的核心原则1. SOLID 原则（面向对象设计的五大基石）2. 其他关键思想第二部分：创建型模式&…...

编程日记 2025/6/29 9:01:22

测试基础笔记第十八天

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、web自动化1.xpath定位1.属性定位2.属性与逻辑结合3.属性和层级结合 2.常见元素定位方法（面试题）3.常见元素定位失败原因4.cookie1.验证码…...

编程日记 2025/6/29 5:13:07

深度学习系统学习系列【2】之人工神经网络（ANN）

文章目录说明人工神经网络概述基本单位（神经元模型）神经元基本模型线性模型与激活函数多层神经网络人工神经网络的注意内容人工神经网络的阶段划分训练阶段输入、输出数据量化的设计权值向量W和偏置b的设计预测阶段人工神经网络核心算法梯度下降算法…...

编程日记 2025/6/29 8:46:38

《解锁Windows下GCC升级密码，开启高效编程新旅程》

《解锁Windows下GCC升级密码，开启高效编程新旅程》为什么要升级 Windows 下的 GCC 版本？在软件开发的动态领域中，GCC 作为一款卓越的编译器，在 Windows 环境下的升级有着重要意义，其影响深远且广泛。从性能优化的角度来看，新版 GCC 往往在编译速度上有显著提升。随着…...

编程日记 2025/6/29 8:22:29

Java面试大冒险：谢飞机的幽默与技术碰撞记

互联网大厂Java求职者面试：一场严肃与搞笑交织的技术盛宴场景： 互联网大厂面试间人物： 面试官： 一位严肃的资深架构师，对技术要求严格。谢飞机： 一位搞笑的程序员，技术实力参差不齐。第一…...

编程日记 2025/6/29 8:32:18

软件检测价格受多种因素影响，你了解多少？

软件检测价格受到多种因素的影响，这对企业来说至关重要，对开发者来说也至关重要，了解软件检测价格能够让企业和开发者更好地进行预算，能够让企业和开发者更好地进行决策。以下为你深入分析相关内容。检测范围影响软件检测范围的…...

编程日记 2025/7/15 22:59:13

学习黑客风险Risk

一眼纵览今天 Day 5 我们用 60 分钟打通「风险管理快闪副本」——先用漫画式视角速读两个国际标准（NIST & ISO/IEC 27005），再把抽象概念变身为炫彩 Risk Heat Map，最后亲手填一张迷你风险登记簿。学完你将能： 讲…...

编程日记 2025/6/29 8:28:36

scikit-learn在监督学习算法的应用

shiyonguyu大家好，我是我不是小upper！最近行业大环境不是很好，有人苦恼别人都开始着手项目实战了，自己却还卡在 scikit-learn 的代码语法上，连简单的示例运行起来都磕磕绊绊。确实，对很多机器学习初学者来说…...

编程日记 2025/7/7 19:02:53

BG开发者日志505：项目总体情况

1、从2024年12月中旬启动，到4月底gameplay部分开发完毕，已经四个半月过去了。其中大部分内容是3、4两个月中完成的，量产阶段。预计6月初参加新品节，6月中旬发售（比原计划7月中旬提前一个月）。 --------…...

编程日记 2025/6/29 8:22:01

MySQL 空值处理函数对比：IFNULL、COALESCE 和 NULLIF

IFNULL、COALESCE 和 NULLIF这三个函数都是 MySQL 中处理 NULL 值的函数，但它们的功能和使用场景有所不同： 1. IFNULL(expr, fallback) 功能：两值处理，专为替换 NULL 设计如果 expr 不是 NULL，返回 expr如果 expr …...

编程日记 2025/6/29 9:02:19

【2025年】MySQL面试题总结

文章目录 1. MySQL 支持哪些存储引擎？默认使⽤哪个？2. MyISAM 和 InnoDB 有什么区别？3. 事务的四大特性?4. 并发事务带来了哪些问题?5. 不可重复读和幻读有什么区别？6. MySQL 事务隔离级别？默认是什么级别&#xff1…...

编程日记 2025/6/29 8:31:13

Python 数据智能实战 (10)：智能商品推荐 - LLM “猜你喜欢”

写在前面 —— 从协同过滤到语义理解：融合 LLM，打造更懂用户心意的个性化推荐在之前的篇章里，我们已经见证了 LLM 在用户分群、购物篮分析、流失预测、内容生成等多个电商环节的赋能潜力。今天，我们将聚焦于电商平台的“心脏”之一，也是用户体验和商业转化的核心驱动力…...

编程日记 2025/6/29 5:13:12

2025年蓝桥杯省赛 Python A 组题目

文章目录 A.偏蓝B.IPv6C.2025图形D.最大数字E.倒水F.拼好数G.登山H.原料采购近期复盘一下省赛的题目，正所谓知不足方能进步可以在洛谷找到比赛的题目，不过得注意由于python版本的问题，有些代码想要在洛谷上ac的话，需要对应调整代…...

编程日记 2025/7/15 15:06:26

shell（7）

运算符 1.基本介绍这是shell进行运算的符号,依靠这些标识才能实现我们在脚本中的运算. 2.基本语法 1、$((运算符))或$[运算符]或expr m n 注意： expr运算符间有空格→如果不加空格会被当做一个整体不会进行运算例子： 3.expr m - n,如果要将expr运算…...

编程日记 2025/6/29 6:43:29

LangChain与MCP：大模型时代的工具生态之争与协同未来

LangChain与MCP：大模型时代的工具生态之争与协同未来 ——从架构差异到应用场景的深度解析引言在大模型驱动的AI应用生态中，LangChain与Model Context Protocol (MCP) 代表了两种截然不同的技术路径：前者以灵活的工具链和开发者友好性著称…...

编程日记 2025/6/29 7:56:59

【LLaMA-Factory实战】Web UI快速上手：可视化大模型微调全流程

一、引言在大模型微调场景中，高效的工具链能显著降低开发门槛。LLaMA-Factory的Web UI（LlamaBoard）提供了低代码可视化平台，支持从模型加载、数据管理到训练配置的全流程操作。本文将结合结构图、代码示例和实战命令&#xff0c…...

编程日记 2025/6/29 5:13:15

源码编译Qt StateMachine

编译某个项目时报错提示fatal error: QSignalTransition: No such file or directory，是因为qtbase中没有包含StateMachine模块，需要qt/qtscxml.git - SCXML (state machine notation) compiler and related tools 编译安装qtscxml 执行如下步骤&#…...

编程日记 2025/6/29 5:13:14

C++ STL vector高级特性与实战技巧

引言各位小伙伴们好！上一篇博客我们介绍了vector的基础知识和常见操作，今天我们将更深入地探讨vector的高级特性、内存管理细节以及实战应用技巧。想象一下vector就像一辆能自动变长的公交车，我们上一篇讲了如何上下车（添加删…...

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

[Windows] Kazumi番剧采集v1.6.9：支持自定义规则+在线观看+弹幕，跨平台下载

[Windows] Kazumi番剧采集链接：https://pan.xunlei.com/s/VOPLMhEQD7qixvAnoy73NUK9A1?pwdtu6i# Kazumi是一款基于框架; 开发的轻量级番剧采集工具，专为ACG爱好者设计。通过;自定义XPath规则; 实现精准内容抓取，支持多平台（An…...

编程日记 2025/6/29 7:23:32

二种MVCC对比分析

文章目录前言MVCCInnodb的MVCC版本链回滚与提交可见性判断 Oracle的MVCC版本链 PostgreSQL的MVCCMVCC实现可见性判断特点前言 MVCC（多版本并发控制，Multi-Version Concurrency Control）是一种数据库管理系统（DBMS&#x…...

编程日记 2025/6/29 5:20:49

Python蓝桥杯真题代码

以下是一些不同届蓝桥杯Python真题代码示例： 第十四届青少年蓝桥杯python组省赛真题删除字符串后缀 input_str input("请输入一个字符串：") suffixes (er, ly, ing) for suffix in suffixes: if input_str.endswith(suffix): input_str …...

编程日记 2025/6/29 7:23:43

四边形 A B C D ABCD ABCD 的对角线 A C AC AC 与 B D BD BD 互相垂直, 点 M M M, N N N 在直线 B D BD BD 上, 且关于直线 A C AC AC 对称. 设点 M M M 关于直线 A B AB AB, B C BC BC 的对称点分别为 X X X, Y Y Y, 点 N N N 关于直线 C D CD CD, D A DA DA 的…...

编程日记 2025/6/29 5:18:39

【KWDB 创作者计划】Docker单机环境下KWDB集群快速搭建指南

【KWDB 创作者计划】Docker 单机环境下 KaiwuDB集群快速搭建指南前言一、KWDB介绍1.1 KWDB简介1.2 主要特点1.3 典型应用场景二、环境介绍2.1 部署环境要求2.2 本地环境规划2.3 本次部署介绍三、下载容器镜像四、创建相关证书文件4.1 创建部署目录4.2 创建证书文件4.3 查看证…...

编程日记 2025/6/29 8:04:17

基于51单片机和LCD1602、矩阵按键的小游戏《猜数字》

目录系列文章目录前言一、效果展示二、原理分析三、各模块代码1、LCD16022、矩阵按键3、定时器0 四、主函数总结系列文章目录前言用的是普中A2开发板，用到板上的矩阵按键，还需要外接一个LCD1602液晶显示屏。【单片机】STC89C52RC 【频率】12T11.05…...

编程日记 2025/6/29 5:13:19

从广义线性回归推导出Softmax：理解多分类问题的核心

文章目录引言：从回归到分类广义线性模型回顾从二分类到多分类Softmax函数的推导建模多类概率基于最大熵原理具体推导步骤Softmax函数的数学形式 Softmax回归模型参数的可辨识性最大似然估计与交叉熵损失似然函数交叉熵损失梯度计算 Softmax回归的实现要点数值稳定…...

编程日记 2025/6/29 6:49:38

传奇各版本迭代时间及内容变化,屠龙/嗜魂法杖/逍遥扇第一次出现的时间和版本

【早期经典版本】 1.10 三英雄传说：2001 年 9 月 28 日热血传奇正式开启公测，这是传奇的第一个版本。游戏中白天与黑夜和现实同步，升级慢，怪物爆率低，玩家需要靠捡垃圾卖金币维持游戏开销，遇到高级别法师…...

编程日记 2025/6/29 5:18:54

云计算-私有云-私有云运维开发

三、私有云运维开发（15） 使用自动化运维工具 Ansible 完成系统的自动化部署与管理。基于 OpenStack APIs 与SDK，开发私有云运维程序 1.OpenStack Python运维开发：实现镜像管理（7分） 编写Python代…...

编程日记 2025/6/29 5:13:16

hadoop存储数据文件原理

Hadoop是一个开源的分布式计算框架，可以用于存储和处理大规模数据集。Hadoop的存储系统基于Hadoop Distributed File System（HDFS），它的主要原理如下： 数据切块：当用户向HDFS中存储一个文件时，该…...

编程日记 2025/7/14 14:19:24

spring2.x详解介绍

一、核心架构升级 Spring 2.x 是 Spring 框架的重要迭代版本（2006-2009年间发布），其核心改进体现在模块化设计和轻量化配置上。相较于 1.x 版本，2.x 通过以下方式重构了架构： XML Schema 支持：弃用 D…...

编程日记 2025/6/29 5:26:00

探索Grok-3的高级用法：功能与应用详解

引言随着人工智能技术的迅猛发展，xAI推出的Grok-3模型以其卓越的性能和创新功能，成为AI领域的新标杆。Grok-3不仅在计算能力上实现了十倍提升，还引入了多种高级模式和实时数据处理能力，适用于学术研究、技术分析、市场洞察等多场…...

编程日记 2025/6/29 8:17:26

PyTorch_张量转换为numpy数组

使用 tensor.numpy 函数可以将张量转换为 ndarray 数组，但是共享内存，可以使用 copy 函数避免共享。共享内存会导致张量或者numpy中的其中一个更改后，另外一个会受到影响。代码 import torch # 张量转换为 numpy 数组 def test01():data_te…...

编程日记 2025/6/29 8:00:43

什么是“原子变量”？

原子变量（std::atomic）在C++中是一个非常关键的机制，特别是在多线程编程中保持数据安全和避免竞争条件。它的设计目标就是让一段操作在多线程环境下变得“原子性”，即不可被中断，保证操作的完整与一致。一、什么是“原子变量”？简单来说：普通变量：在多线程环境中，…...

编程日记 2025/6/29 5:13:18

[Linux开发工具]gcc/g++

C语言文件编译运行 gcc code.c -o mycode gcc -o mycode code.c 预处理汇编编译链接预处理(进行宏替换/去注释/条件编译/头文件展开) gcc -E code.c -o code.i -E ->从现在开始进行程序的编译,当我们的程序预处理完毕后,翻译工作,就停下来 code.i预处理之后的结果 …...

编程日记 2025/6/29 7:58:41

【Mytais系列】Type模块：类型转换

MyBatis 的类型系统（Type System） 是框架处理 Java 类型与数据库类型之间映射的核心模块，它通过类型处理器（TypeHandler）、类型别名（TypeAlias） 和类型转换器等机制，实现了数据库…...

编程日记 2025/6/29 7:37:57

C++类_虚基类

在 C 里，虚基类是用来解决菱形继承问题的。菱形继承问题是指当一个派生类从两个或更多基类派生，而这些基类又从同一个基类派生时，派生类会包含多份间接基类的数据副本，这可能会引发数据冗余和二义性问题。虚基类可以保证在派生类中…...

编程日记 2025/6/29 8:09:14

【自然语言处理与大模型】使用Xtuner进行模型合并与导出

在上一篇文章中我为大家介绍了Xtuner框架如何进行QLoRA微调，这个框架在微调过后会得到适配器权重文件，它的后缀是.pth。但原模型都是huggingface模型，其后缀是safetensors。所以呢我们在使用这个框架导出模型之前要合并，合并之前要…...

编程日记 2025/6/29 7:51:07

数据结构4.0

大家好，今天是栈的知识点~ 目录一、栈的概念 1.0 栈的概念 2.0 概念区分二、栈的方法 1.0 MyStack方法： 2.0 将元素压入栈顶 3.0 移除并返回栈顶元素 4.0 返回栈顶元素但不移除三、栈的题目 1.0括号匹配 2.0逆波兰表达式求值 3.0 出栈…...

编程日记 2025/6/29 7:25:54

节流（Throttle）是一种常用的性能优化技术，用于限制函数的执行频率，确保在一定时间内只执行一次。它常用于处理浏览器事件（如滚动、窗口调整大小、鼠标移动等），以避免因事件触发过于频繁而导致的性能问题。

节流函数的实现

1. 时间戳版本（基于时间间隔）

2. 定时器版本（基于固定时间间隔）

使用示例

1. 滚动事件

2. 窗口调整大小

注意事项

完整代码示例

防抖（Debounce）是一种常用的性能优化技术，用于限制函数的执行频率。与节流（Throttle）不同，防抖的核心思想是：在指定的时间间隔内，只有最后一次触发事件时才执行函数。如果在时间间隔内再次触发事件，则重新计时。

防抖函数的实现

基本实现

实现思路

具体案例：输入框搜索建议

防抖的高级用法

1. 立即执行与延迟执行

使用示例

与防抖的区别

在 Vue 中使用：

2. 使用 Lodash 的 debounce throttle

安装 Lodash：

使用 debounce：

使用 throttle：

3. 使用 Vue 组合式 API 封装防抖

封装 useDebounce：

使用：

4. 使用 Vue 指令封装防抖

定义指令：

使用：

5. 使用 VueUse 的 useDebounce

安装 VueUse：

使用：

总结

相关文章：

2. 使用 Lodash 的 `debounce throttle`

封装 `useDebounce`：

5. 使用 VueUse 的 `useDebounce`