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

VUE前端实现防抖节流 Lodash

news 来源：原创 2025/7/22 19:42:11

方法一：采用Lodash工具库

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

（1）采用终端导入Lodash库

$ npm i -g npm
$ npm i --save lodash

（2）应用

示例：搜索框输入防抖

在这个示例中，我们希望用户在输入框中停止输入 500 毫秒后才执行搜索操作，避免频繁请求.

<input type="text" id="search" placeholder="Search..."><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>// 假设这是一个执行搜索操作的函数function performSearch(query) {console.log('Searching for:', query);// 这里可以发送 ajax 请求进行搜索}// 使用 lodash 的 debounce 函数const debouncedSearch = _.debounce(function(event) {performSearch(event.target.value);}, 500);  // 500ms 的防抖时间// 监听输入框的输入事件document.getElementById('search').addEventListener('input', debouncedSearch);
</script>

示例：滚动事件节流

在这个示例中，我们希望当用户滚动页面时，每隔 1 秒才记录一次滚动事件，避免频繁触发回调函数。

<div style="height: 2000px;">Scroll down to see the effect</div>
<!-- 导入 throttle 函数-->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>// 这是一个处理滚动事件的函数function handleScroll() {console.log('Scroll event detected at:', new Date().toLocaleTimeString());}// 使用 lodash 的 throttle 函数，每隔 1 秒最多触发一次const throttledScroll = _.throttle(handleScroll, 1000);// 监听滚动事件window.addEventListener('scroll', throttledScroll);
</script>

解释：

- 当用户滚动页面时，throttledScroll 函数会在 1 秒内最多触发一次，避免滚动时回调函数被频繁调用。
- 这优化了页面滚动的性能，特别是在回调函数较为复杂时。

示例：结合 `leading` 和 `trailing` 选项

假设我们希望在用户第一次触发事件时立即执行函数，并在停止触发 1 秒后再次执行。

<input type="text" id="input-field" placeholder="Type something..."><script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
<script>// 假设这是一个处理输入的函数function handleInput(value) {console.log('Input value processed:', value);}// 使用 debounce 函数，并配置 leading 和 trailing 选项const debouncedInput = _.debounce(function(event) {handleInput(event.target.value);}, 1000, { leading: true, trailing: true });// 监听输入框的输入事件document.getElementById('input-field').addEventListener('input', debouncedInput);
</script>

方法二：自定义防抖、节流函数

（1）在utils文件夹下创建lodash.ts文件，里面定义防抖节流函数


// 防抖函数
export function debounce(fn: Function, delay: number) {let timer: ReturnType<typeof setTimeout> | null = null;return function (this: any, ...args: any[]) {// 清除上一个定时器if (timer) {clearTimeout(timer);}// 设置新的定时器timer = setTimeout(() => {fn.apply(this, args); // 使用apply确保this和参数正确传递}, delay);};
}// 节流函数
export function throttle(fn: Function, delay: number) {let lastTime = 0;return function (this: any, ...args: any[]) {const now = Date.now();// 如果距离上次执行时间已超过指定时间间隔，则执行函数if (now - lastTime >= delay) {lastTime = now;  // 更新上次执行时间fn.apply(this, args);}};
}

（2）应用

防抖

方式一：

<template><div><input v-model="searchText" placeholder="输入搜索内容" /><button @click="handleSubmit">提交</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { debounce } from '@/utils/debounce';  // 引入自己写的防抖函数// 1. 声明响应式数据
const searchText = ref<string>('');// 2. 防抖函数，延迟1000毫秒执行提交操作
const submitForm = (val: string) => {console.log('提交的搜索值:', val);// 在这里执行提交操作
};// 3. 使用防抖函数包装提交操作
const handleSubmit = debounce(() => {submitForm(searchText.value);  // 使用当前输入的值执行提交操作
}, 1000); // 防抖延迟设置为1000毫秒</script>

方式二：

<template><div><input v-model="searchText" placeholder="输入搜索内容" /><button @click="submitForm(searchText)">提交</button></div>
</template><script lang="ts" setup>
import { ref } from 'vue';
import { debounce } from '@/utils/debounce';  // 引入自己写的防抖函数// 1. 声明响应式数据
const searchText = ref<string>('');// 2. 定义提交表单操作
const submitForm = debounce((val: string) => {console.log('提交的搜索值:', val);// 在这里执行提交操作
}, 1000);  // 防抖延迟设置为1000毫秒</script>

节流

<template><div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;"><!-- 模拟内容，超出容器高度以启用滚动 --><div style="height: 1000px;">滚动内容</div></div>
</template><script lang="ts" setup>
import { throttle } from './debounce';  // 引入节流函数// 1. 定义滚动事件处理函数（节流）
const handleScroll = throttle(() => {console.log('滚动事件触发');// 在这里处理滚动事件，例如加载更多内容
}, 200);  // 每200毫秒只执行一次</script>

<template><div @scroll="handleScroll" style="height: 300px; overflow-y: scroll;"><!-- 模拟内容，超出容器高度以启用滚动 --><div style="height: 1000px;">滚动内容</div></div>
</template><script lang="ts" setup>
import { throttle } from './debounce';  // 引入节流函数// 1. 定义滚动事件处理函数（节流）
const handleScroll = throttle(() => {console.log('滚动事件触发');// 在这里处理滚动事件，例如加载更多内容
}, 200);  // 每200毫秒只执行一次</script>

应用场景

防抖 (`debounce`):

手抖了。。。多点了好几次，一定时间内只执行一次。（年纪大了手抖）

功能：只有在用户停止触发事件一段时间后，才会执行回调函数。
应用场景：输入框搜索、窗口大小调整（resize）、表单提交等。

节流 (`throttle`):

好比点了两次下拉刷新列表页面，他不会马上直接执行两次，是在你定义的一定时间间隔前提前，先执行第一次在执行第二次

功能：在指定的时间间隔内，只执行一次函数。如果触发频繁，函数执行会被限制在每个时间间隔内最多执行一次。
应用场景：滚动事件、鼠标移动事件、resize 事件等。

VUE前端实现防抖节流 Lodash

方法一：采用Lodash工具库 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 （1）采用终端导入Lodash库 $ npm i -g npm $ npm i --save lodash （2）应用示例：搜索框输入防抖在这个示例…...

编程日记 2025/7/22 19:42:11

Redisson 框架详解

目录一.为什么要使用分布式锁？ 二.Redisson 的基本使用： 1.添加 Redisson 依赖： 2.在 application.yml 配置 Redis： 3. 创建 Redisson 客户端： （1）单节点模式： （…...

编程日记 2025/7/22 10:54:57

WebSocket 入门详解

开发领域：前端开发 | AI 应用 | Web3D | 元宇宙技术栈：JavaScript、React、Three.js、WebGL、Go 经验经验：6年前端开发经验，专注于图形渲染和AI技术开源项目：智简未来晓智元宇宙、数字孪生引擎大家好！…...

编程日记 2025/7/22 11:09:28

只针对 https://ouc-sz.chinahrt.com/center/MyExam import requests import time import random import pandas as pd from openpyxl import load_workbookexcel_file rC:\Users\N3verL4nd\Desktop\exam_answers.xlsx# 定义请求头，包含 Authorization headers {…...

编程日记 2025/7/22 17:13:09

uniapp通过v-if进行判断时,会出现闪屏？【已解决】

1.问题：按钮切换时，通过v-if来判断，会出现闪烁情况，影响用户体验 2.v-if 闪烁问题可能的原因 ‌条件切换频繁‌：如果 v-if 指令的条件在短时间内频繁切换，会导致元素不断被销毁和重新创建，从而…...

编程日记 2025/7/20 18:48:10

jmeter设置tps、响应时间监测时间间隔

jmeter设置tps、响应时间监测时间间隔思路： 1、设置tps和响应时间插件的采集时间间隔，然后运行jmeter脚本； 2、先按默认配置跑出jtl文件保存下来，再添加tps和响应时间插件，设置采集时间间隔后，导入jtl文件…...

编程日记 2025/7/22 11:55:07

Android Notification 问题：Invalid notification (no valid small icon)

问题描述与处理策略 1、问题描述 java.lang.RuntimeException: Unable to start activity ComponentInfo{com.my.notifications/com.my.notifications.MainActivity}: java.lang.IllegalArgumentException: Invalid notification (no valid small icon): Notification(chan…...

编程日记 2025/7/21 21:09:47

Kotlin 协程基础知识总结四 —— Flow

异步流 Flow 主要内容： 认识：特性、构建器与上下文、启动、取消与取消检测特性、缓冲操作符：过渡操作符、末端操作符、组合、扁平异常：异常处理、完成 1、认识 1.1 如何异步返回多个值挂起函数可以异步返回单个值&#xff0c…...

编程日记 2025/7/21 23:32:48

Ubuntu24.04安装NVIDIA驱动及工具包

Ubuntu24.04安装NVIDIA驱动及工具包安装nvidia显卡驱动安装cuda驱动安装cuDNN安装Anaconda 安装nvidia显卡驱动 NVIDIA 驱动程序（NVIDIA Driver）是专为 NVIDIA 图形处理单元（GPU）设计的软件，它充当操作系统与硬件之间…...

编程日记 2025/7/21 21:19:10

雷电模拟器安装LSPosed

雷电模拟器最新版支持LSPosed。记录一下安装过程首先到官网下载并安装最新版，我安装的时候最新版是9.1.34.0，64位然后开启root和系统文件读写然后下载magisk-delta-6并安装 ,这个是吾爱破解论坛提供的，号称适配安卓7以上所有机型&#x…...

编程日记 2025/7/14 20:52:53

基于深度学习(HyperLPR3框架)的中文车牌识别系统-搭建开发环境

本篇内容为搭建开发环境。包括：python开发环境，Qt/C开发环境，以及用到的各个库的安装和配置。一、Python开发环境搭建与配置 1、下载并安装Anaconda 我没有用最新的版本，安装的是 Anaconda3-2021.05-Windows-x86_64.exe&#…...

编程日记 2025/7/22 2:03:31

TCP 为什么采用三次握手和四次挥手以及 TCP 和 UDP 的区别

1. TCP 为什么采用三次握手和四次挥手采用三次握手的原因： 确认双方的收发能力。第一次握手，客户端发送 SYN 报文，告诉服务器自身具备发送数据的能力，第二次握手，服务器回应 SYN ACK 报文，表名自己既能…...

编程日记 2025/7/22 12:50:59

Apriori关联规则算法 HNUST【数据分析技术】(2025)

1.理论知识 Apriori是一种常用的数据关联规则挖掘方法，它可以用来找出数据集中频繁出现的数据集合。该算法第一次实现在大数据集上的可行的关联规则提取，其核心思想是通过连接产生候选项及其支持度，然后通过剪枝生成频繁项集。 Apriori算法的…...

编程日记 2025/7/22 12:35:32

Sqoop的使用

每个人的生活都是一个世界，即使最平凡的人也要为他那个世界的存在而战斗。 ——《平凡的世界》目录一、sqoop简介 1.1 导入流程 1.2 导出流程二、使用sqoop 2.1 sqoop的常用参数 2.2 连接参数列表 2.3 操作hive表参数 2.4 其它参数三、sqoop应用 - 导入…...

编程日记 2025/7/22 12:47:22

华为 IPD，究竟有什么特点？（一）

关注作者 （一）华为版 IPD 特点一：一定要让研发转身为作战部队冲到前台的研发，应主动拉通公司上下游，向前抓需求，向后支撑可制造性、可服务性，并推动制造、服务的改进。 1）研发从…...

编程日记 2025/7/22 12:58:05

Go快速开发框架2.6.0版本更新内容快速了解

GoFly企业版框架2.6.0版本更新内容较多，为了大家能够快速了解，本文将把更新内容列出详细讲解。本次更新一段时间以来大伙反馈的问题，并且升级后台安全认证机制，增加了RBAC权限管理及系统操作日志等提升后台数据安全性。更新明细…...

编程日记 2025/7/22 13:12:28

C++的第一个程序

前言在学习c之前，你一定还记得c语言的第一个程序当时刚刚开始进行语言学习因此告诉到，仅仅需要记住就可以 #include <stdio.h>int main(){printf("Hello World");return 0; }而对于c中的第一个程序，似乎有所变化 C的…...

编程日记 2025/7/22 12:41:39

《机器学习》线性回归模型实现

目录一、一元线性回归模型 1、数据 2、代码 3、结果二、多元线性回归模型 1、数据 2、代码 3、结果一、一元线性回归模型 1、数据 2、代码 # 导入所需的库 import pandas as pd # 用于数据处理和分析 from matplotlib import pyplot as plt # 用于数据可视化 fr…...

编程日记 2025/7/22 13:34:52

蓝桥杯速成教程｛三｝（adc,i2c,uart）

目录一、adc 原理图编辑引脚配置 Adc通道使能配置实例测试编辑效果显示案例程序 badc 按键相关函数测量频率占空比 main 按键的过程显示界面的过程二、IIC通信-eeprom 原理图AT24C02 引脚配置不可用状态，用的软件IIC 官方库移植 At24c02手册编辑…...

编程日记 2025/7/22 17:39:23

【Agent】Chatbot、Copilot与Agent如何帮助我们的提升效率？

人工智能（AI）技术的迅猛发展正在深刻改变我们的生活和工作方式。你是否曾想过，未来的工作场景会是什么样子？AI的崛起不仅仅是科技的进步，更是我们生活方式的革命。今天，我们将深入探讨三种主要的AI能力&…...

编程日记 2025/7/22 13:25:12

PostgreSQL 数据库连接

title: PostgreSQL 数据库连接 date: 2024/12/29 updated: 2024/12/29 author: cmdragon excerpt: PostgreSQL是一款功能强大的开源关系数据库管理系统，在现代应用中广泛应用于数据存储和管理。连接到数据库是与PostgreSQL进行交互的第一步，这一过程涉及到多个方面，包括连…...

编程日记 2025/7/22 14:00:44

C++ 设计模式：中介者模式（Mediator Pattern）

链接：C 设计模式链接：C 设计模式 - 门面模式链接：C 设计模式 - 代理模式链接：C 设计模式 - 适配器中介者模式（Mediator Pattern）是行为型设计模式之一，它的主要目的是通过一个中介者对象来…...

编程日记 2025/7/22 13:28:40

计算机网络期末复习

目录第一章-概述第二章-物理层第三章-数据链路层第四章-网络层第五章-运输层第六章-应用层试卷郑州轻工业大学--计算机网络（谢希仁-第八版）--期末复习重点题型及试卷如果有答案错乱或者不对的地方请告知一下，感谢&#xff0…...

编程日记 2025/7/22 5:38:52

JUC并发工具---线程协作

信号量能被FixedThreadPool代替吗 Semaphore信号量控制需要限制访问量的资源，没有获取到信号量的线程会被阻塞 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.Semaphore;public class Sem…...

编程日记 2025/7/22 13:46:45

SkyWalking java-agent 是如何工作的，自己实现一个监控sql执行耗时的agent

Apache SkyWalking 是一个开源的应用性能监控 (APM) 工具，支持分布式系统的追踪、监控和诊断。SkyWalking Agent 是其中的一个重要组件，用于在服务端应用中收集性能数据和追踪信息，并将其发送到 SkyWalking 后端服务器进行处理和展示。 SkyW…...

编程日记 2025/7/22 13:52:49

Linux 常用命令 - pwd 【显示当前工作目录】

简介 pwd 命令来源于 “print working directory”，即“打印当前工作目录”。这个命令的最主要功能就是显示当前用户所在的完整目录路径。在实际工作中我们经常会频繁在各个目录下进行切换，为了快速获取当前我们所在的目录，可以使用该命令进…...

编程日记 2025/7/22 14:02:16

如何在 Ubuntu 上安装 PyTorch

简介 PyTorch 因其易用性、动态计算图和高效性而日益流行，成为实现深度学习模型的首选。如果你想探索这个工具并学习如何在 Ubuntu 上安装 PyTorch，本指南将对你有所帮助！ 在本教程中，我们将引导你完成在 Ubuntu 系统上使用 Pip…...

编程日记 2025/7/22 14:06:53

redis优化

在高并发、高性能、高可用系统中，Redis 的优化至关重要。以下是一些在面试中可以详细说明的 Redis 优化策略，以及具体的实践经验和技术亮点： 1. 数据模型与结构设计优化使用合适的数据结构 ：根据业务需求选择合适的 Redis 数据结…...

编程日记 2025/7/22 14:12:26

QT的信号和槽页面的应用

完善对话框，点击登录弹出对话框，如果账号和密码匹配，则弹出信息对话框，给出提示”登录成功“，提供一个Ok按钮，用户点击Ok后，关闭登录界面，跳转到其他界面如果账号和密码不匹配&…...

编程日记 2025/7/22 14:14:44

Jmeter自学【8】- 使用JMeter模拟设备通过MQTT发送数据

今天使用jmeter推送数据到MQTT，给大家分享一下操作流程。一、安装JMeter 参考文档：Jmeter自学【1】- Jmeter安装、配置二、安装MQTT插件 1、下载插件我的Jmeter版本是5.6.3，用到的插件是：mqtt-xmeter-2.0.2-jar-with-depe…...

编程日记 2025/7/21 17:35:46

深度学习任务中的 `ulimit` 设置优化指南

深度学习任务中的 ulimit 设置优化指南 1. 什么是 ulimit？2. 深度学习任务中的关键 ulimit 设置2.1 max locked memory（-l）2.2 open files（-n）2.3 core file size（-c）2.4 stack size&#xff08…...

编程日记 2025/7/22 14:29:32

C++(Qt)软件调试---VS性能探查器（27）

文章目录 [toc]1 概述🐜2 VS工具说明2.1 使用场景2.2 工具适用项目 3 CPU使用率4 内存分析4.1 调试模式下分析内存4.2 非调试模式下分析内存 5 相关地址🐐 更多精彩内容👉内容导航 👈👉C软件调试 👈 1 概述…...

编程日记 2025/7/22 14:26:04

Spring源码_05_IOC容器启动细节

前面几章，大致讲了Spring的IOC容器的大致过程和原理，以及重要的容器和beanFactory的继承关系，为后续这些细节挖掘提供一点理解基础。掌握总体脉络是必要的，接下来的每一章都是从总体脉络中， 去研究之前没看的一些重要…...

编程日记 2025/7/22 14:27:52

【c语言】简单的c程序设计

内存 1byte8bit 1KB1024byte 1MB1024byte 1G1024MB 1T1024G 变量变量可以由数字、字母和下划线组成且不能以数字开头任何不满足条件的变量都是非法变量，如含有特殊字符的变量等变量不能含有空白字符，如空格、换行符等变量区分大小写变量不能是c语言…...

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

k8s dashboard可视化操作界面的安装

一、官方安装方法根据官网的安装配置可以选择如下安装： kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.0.0/aio/deploy/recommended.yaml 二、添加阿里云加速进行安装 #修改recommended.yaml拉取镜像的链接 vim recommended.yam…...

编程日记 2025/7/22 14:33:03

鸿蒙项目云捐助第三十一讲云捐助项目云前台显示商品列表

鸿蒙项目云捐助第三十一讲云捐助项目云前台显示商品列表前面完成了云数据库后台的商品批量添加，这里需要把数据放在分类导航页面中显示。一、云前台显示商品列表这里需要把商品列表显示在MyNavSliderBar的组件中,MyNavSliderBar组件是通过首页路由实现的,在项…...

编程日记 2025/7/22 14:34:47

【rustdesk】客户端和服务端的安装和部署（自建服务器，docker，远程控制开源软件rustdesk）

【rustdesk】客户端和服务端的安装和部署（自建服务器，docker） 一、官方部署教程 https://rustdesk.com/docs/zh-cn/client/mac/ 官方服务端下载地址 https://github.com/rustdesk/rustdesk-server/releases 我用的docker感觉非常方便&am…...

编程日记 2025/7/22 14:40:10

Flink源码解析之：如何根据算法生成StreamGraph过程

Flink源码解析之：如何根据算法生成StreamGraph过程在我们日常编写Flink应用的时候，会首先创建一个StreamExecutionEnvironment.getExecutionEnvironment()对象，在添加一些自定义处理算子后，会调用env.execute来执行定义好的Flin…...

编程日记 2025/7/22 14:43:39

【Spring MVC 核心机制】核心组件和工作流程解析

在 Web 应用开发中，处理用户请求的逻辑常常会涉及到路径匹配、请求分发、视图渲染等多个环节。Spring MVC 作为一款强大的 Web 框架，将这些复杂的操作高度抽象化，通过组件协作简化了开发者的工作。无论是处理表单请求、生成动态页面&#x…...

编程日记 2025/7/22 19:23:39

2、Bert论文笔记

Bert论文 1、解决的问题2、预训练微调2.1预训练微调概念2.2深度双向2.3基于特征和微调（预训练下游策略） 3、模型架构4、输入/输出1.输入：2.输出：3.Learned Embeddings(学习嵌入)1. **Token Embedding**2. **Position Embedding**3…...

编程日记 2025/7/22 14:54:11

hadoop搭建

前言一般企业中不会使用master slave01 slave02来命名 vmware创建虚拟机打开vmware软件，新建虚拟机典型稍后安装系统选择centos7 虚拟机名称和安放位置自行选择（最小化安装消耗空间较少） 默认磁盘大小即可自定义硬件选择centos7的i…...

编程日记 2025/7/22 16:09:57

19_HTML5 Web Workers --[HTML5 API 学习之旅]

HTML5 Web Workers 是一种允许 JavaScript 在后台线程中运行的技术，从而不会阻塞用户界面或其他脚本的执行。通过使用 Web Workers，你可以执行复杂的计算任务而不影响页面的响应速度，提升用户体验。 Web Workers 的特点 Web Workers 是 HTM…...

编程日记 2025/7/21 16:32:38

【PCIe 总线及设备入门学习专栏 5.1 -- PCIe 引脚 PRSNT 与热插拔】

文章目录 OverviewPRSNT 与热插拔PRSNT 硬件设计 Overview Spec 定义的热插拔是把一个PCIe卡（设备）从一个正在运行的背板或者系统中插入/或者移除。这个过程需要不影响系统的其他功能。插入的新的设备可以正确工作。显然，这里面需要考虑的问…...

编程日记 2025/7/22 15:51:30

使用docker compose安装gitlab

使用docker compose安装gitlab GitLab简介设置GITLAB_HOME路径创建docker挂载目录获取可用的GitLab版本编写docker-compose.yml文件启动docker基础配置 GITLAB_OMNIBUS_CONFIG修改配置中文设置数据库配置系统邮箱配置 GitLab简介 GitLab是一个基于Git的开源项目&#xff0c…...

编程日记 2025/7/22 16:00:00

性能中 UV、PV 和并发量的关系

在性能测试中，UV（独立访客数）、PV（页面浏览量）和并发量是重要的指标，用于评估系统的负载能力。它们之间关系紧密，需要通过合理的计算和示例进行说明。 1. 概念解析 UV（Unique Visito…...

编程日记 2025/7/22 9:16:55

Go语言zero项目服务恢复与迁移文档

## 一. 服务器环境配置在迁移和配置项目时，首先需要确保服务器环境正确配置。以下是配置步骤： ### 1. 安装 Go 语言环境首先，确保 Go 语言环境已经安装，并且配置正确。执行以下步骤： # 下载 Go 语言安装包 wge…...

编程日记 2025/7/22 16:29:28

Redis - Token JWT 概念解析及双token实现分布式session存储实战

Token 定义：令牌，访问资源接口（API）时所需要的资源凭证一、Access Token 定义：访问资源接口（API）时所需要的资源凭证，存储在客户端组成组成部分说明uid用户唯一的身份标识time…...

编程日记 2025/7/22 16:44:19

QT中使用OpenGL function

1.前言 QT做界面编程很方便，QTOpenGL的使用也很方便，因为QT对原生的OpenGL API进行了面向对象化的封装。如： 函数：initializeOpenGLFunctions()...... 类：QOpenGLVertexArrayObject、QOpenGLBuffer、QOpenGLShader…...

编程日记 2025/7/22 15:24:43

STM32-笔记18-呼吸灯

1、实验目的使用定时器 4 通道 3 生成 PWM 波控制 LED1 ，实现呼吸灯效果。频率：2kHz，PSC71，ARR499 利用定时器溢出公式周期等于频率的倒数。故Tout 1/2KHZ；Ft 72MHZ PSC71（喜欢设置成Ft的倍数&…...

编程日记 2025/7/22 17:20:24

MAC M4安装QT使用国内镜像源在线安装

MAC M4安装QT使用国内镜像源在线安装一、下载安装包1. 访问[https://www.qt.io/](https://www.qt.io/)下载在线安装包2. 下载结果二、创建QT账户，安装的时候需要三、安装1. 终端打开安装包2. 指定安装源3. 运行安装完的QT 一、下载安装包 1. 访问https://www.qt.…...

编程日记 2025/7/22 17:18:59

方法一：采用Lodash工具库

（1）采用终端导入Lodash库

（2）应用

示例：搜索框输入防抖

示例：滚动事件节流

示例：结合 leading 和 trailing 选项

方法二：自定义防抖、节流函数

（1）在utils文件夹下创建lodash.ts文件，里面定义防抖节流函数

（2）应用

防抖

节流

应用场景

防抖 (debounce):

节流 (throttle):

相关文章：

示例：结合 `leading` 和 `trailing` 选项

防抖 (`debounce`):

节流 (`throttle`):