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

JS—防抖和节流：1分钟掌握防抖和节流

news 来源：原创 2025/9/17 4:06:01

个人博客：haichenyi.com。感谢关注

一. 目录

一–目录
二–防抖
三–节流
四–进阶应用
五–总结

二. 防抖（Debounce）

防抖（Debebounce）和节流（Throttle）都是前端开发中用于优化高频事件性能的两种技术。他们的核心目的是减少函数的不必要的调用频率，但实现方式和场景有所不同。
原理： 事件触发后，开始计时，若在规定时间内，没有再触发该事件，则执行事件。若在规定时间内，又触发了该事件，则重新计时。
适用场景： 输入框的搜索事件，窗口大小调整，按钮的点击事件等等

function debounce(func, delay) {let timer;return function (...args) {//清空上一次的定时器clearTimeout(timer)timer = setTimeout(() => {//绑定this关键字和参数，并立即执行//apply,call,bind三者的区别，前面的博客中讲过了func.apply(this, args)}, delay);}
}// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {console.log('发起搜索请求');
}, 500));

特点：

高频操作停止后才会执行
若高频操作不停止，则该事件永远不会执行

三. 节流（Throttle）

原理： 在规定时间间隔内，不论事件触发多少次，函数只会执行一次。
适用场景： 滚动事件（scroll）、鼠标移动（mousemove）、游戏中的射击频率限制等。

function throttle(func, delay) {let lastTime;return function (...args) {let now = Date.now()if (now - lastTime >= delay) {func.apply(this, args)lastTime = now}}
}// 使用示例
window.addEventListener('scroll', throttle(function() {console.log('处理滚动事件');
}, 200));

特点：

不管事件触发多少次，都按照固定频率执行，稀释执行的次数。
保证高频操作下函数周期性执行。

四. 进阶应用

（4.1）立即执行的防抖，第一次触发立即执行，后续触发防抖：

function debounce(func, delay) {let timer;return function (...args) {//如果timer是空，则立刻执行let immediately = !timer//第一次调用timer就是空，则立刻执行，短时间内再次触发，清空上一次的定时器，clearTimeout(timer)if (immediately) {func.apply(this, args)}timer = setTimeout(() => {timer = null}, delay);}
}

（4.2）头节流（Leading）：期望第一次触发立即执行

function throttle(func, delay) {let lastTime = 0;return function (...args) {let now = Date.now()// 计算剩余时间（若首次触发则剩余时间 <= 0）let remaining = delay - (now - lastTime)if (remaining <= 0) {func.apply(this, args)lastTime = now}}
}

（4.3）尾节流（Trailing）：保证最后一次触发，逻辑会执行

function throttle(func, delay) {let timer = null;return function (...args) {if (!timer) {timer = setTimeout(() => {func.apply(this, args)timer = null}, delay);}}
}

五. 总结

特性	防抖	节流
执行时机	高频事件结束后，规定时间内执行	高频事件按照频率执行
适用场景	输入框，提交按钮等	滑动事件，动画渲染
极端情况	持续触发，不会执行	持续触发时，函数按规律执行

防抖： 合并多次操作为一次，适合“最终状态”场景（如输入停止后搜索）。
节流： 稀释执行频率，适合持续高频事件（如滚动事件）。

推荐使用Lodash的方法，不需要自己手动去写，了解防抖节流的原理即可。

JS—防抖和节流：1分钟掌握防抖和节流

个人博客：haichenyi.com。感谢关注一. 目录一–目录二–防抖三–节流四–进阶应用五–总结二. 防抖（Debounce） 防抖（Debebounce）和节流（Throttle）都是前端开发中用于优化高频事件性能的两…...

编程日记 2025/9/17 4:06:01

MCP基础学习二：MCP服务搭建与配置

文章目录 MCP服务搭建与配置一，学习目标：二，学习内容：1. 如何搭建MCP服务端服务端初始化与配置MCP服务架构与数据流交互图核心实现注册服务功能服务器启动与API暴露 2. 本地应用与MCP服务的集成客户端SDK实现客户端应用实现功能演…...

编程日记 2025/9/17 4:05:03

MyBatis 操作数据库

目录什么是MyBatis? 注释 Mapper注释的介绍和使用 Select注释的介绍和使用 SpringBootTest注释的介绍和使用 Test注释的介绍的使用 MyBatis入门 1）准备工作 <1>创建工程 <2>数据准备 2）配置数据库连接字符串 3&#xff…...

编程日记 2025/9/6 21:37:03

蓉光：科技与自然的千年交响

故事背景故事发生在中国四川成都，这座千年古城在近未来完成蜕变，青城山的云雾与锦江的碧波间，智能建筑如雨后春笋般生长。全城建筑采用太阳能皮肤，街道流淌着数字化的都江堰水系，杜甫草堂的飞檐与机械芙蓉树共舞&…...

编程日记 2025/9/17 3:58:41

[C语言]gets和fgets函数区别及详解

一、gets 每当讨论 gets 函数时，大家不由自主地就会想起 1988 年的“互联网蠕虫”，它在 UNIX 操作系统的 finger 后台程序中使用一个 gets 调用作为它的攻击方式之一。很显然，对蠕虫病毒的实现来说， gets 函数的功劳不可小视。不…...

编程日记 2025/9/10 0:15:28

【场景应用3】audio_classification：音频分类的微调

1 引言本笔记展示了如何对多语种预训练的语音模型进行微调，以实现自动语音识别（Automatic Speech Recognition）。本笔记旨在使用SUPERB数据集中的关键词检测子集，并且可以使用任何来自模型库（Model Hub）的语音模型检查点，只要该模型有一个包含序列分类头（Sequence …...

编程日记 2025/9/14 10:09:28

【前端】【难点】前端富文本开发的核心难点总结与思路优化

前端富文本开发的核心难点总结富文本编辑器在前端开发中广泛应用于内容管理系统、文章发布、评论区等场景。其开发与集成存在较多复杂性，涵盖内容结构管理、交互体验、跨平台兼容性等方面，以下逐项分析。二、富文本开发的具体难点分析 （一…...

编程日记 2025/9/4 3:10:27

如何优雅使用 ReentrantLock 进行加解锁：避免常见坑点，提高代码可维护性

引言：锁的基本概念和问题在多线程编程中，为了确保多个线程在访问共享资源时不会发生冲突，我们通常需要使用锁来同步对资源的访问。Java 提供了不同的锁机制，其中 ReentrantLock 是一种最常用且功能强大的锁，它属于…...

编程日记 2025/9/12 13:25:28

帕金森患者行动迟缓，日常生活怎么破局？

帕金森病，是一种常见于中老年人的神经退行性疾病，正悄然改变着无数患者的生活轨迹。它初期症状隐匿，常以手抖为信号，起初可能只是在安静状态下，手部出现轻微且有节律的震颤，随着时间推移，震颤逐…...

编程日记 2025/9/16 4:06:20

7-openwrt-one通过web页面配置访客网络、无线中继等功能

前几个章节一直在介绍编译、分区之类的，都还没正常开始使用这个路由器的wifi。默认wifi是没有启动的，前面还是通过手动修改uci配置启动的，这个章节介绍下官方web页面的使用。特别是访客网络、无线中继 1、开启wifi，配置wifi基本信息我们使用有线连接路由器，通过192.168.…...

编程日记 2025/9/8 1:30:11

塑造现代互联网的力量：Berkeley在网络领域的影响与贡献

引言 “Berkeley” 这个名字在计算机网络和互联网领域中具有举足轻重的地位，许多关键的技术、协议和工具都与其紧密相关。它与加利福尼亚大学伯克利分校（UC Berkeley） 密切相关，该校在计算机科学与网络研究中做出了许多开创性的…...

编程日记 2025/9/13 16:45:13

大数据学习（105）-Hbase

🍋🍋大数据学习🍋🍋 🔥系列专栏： 👑哲学语录: 用力所能及，改变世界。 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一…...

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

c# 系列pdf转图片各种处理3--net3.1到net8 PDFtoImage

最近一直在做pdf渲染图片的问题，nuget PDFtoImage 支持3.1到net8 ，直接上代码 private static void DownloadFileAsync(string url, string localPath){using (HttpClient client new HttpClient()){client.DefaultRequestHeaders.Add("User-Agen…...

编程日记 2025/9/8 21:42:45

宁德时代25年春招笔试演绎数字推理SHL测评题库

宁德时代校招测评包含演绎推理数字推理两部分，请单击以下链接进行测评，详细操作指引请参见如下指引，请在测试前了解，大约用时60分钟。正式测评有两个部分:数字推理18分钟演绎推理18分钟，数字推理共10题，演绎…...

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

C# 看门狗策略实现

using System; using System.Threading;public class Watchdog {private Timer _timer;private volatile bool _isTaskAlive;private readonly object _lock new object();private const int CheckInterval 5000; // 5秒检测一次private const int TimeoutThreshold 10000; …...

编程日记 2025/9/9 22:31:54

聊透多线程编程-线程池-5.C# 线程池（ThreadPool）详解

1. 线程池的基本概念线程池的作用由于每创建一个线程都需要该线程分配一定的内存空间，因此创建大量线程会导致内存使用量迅速增加，并可能导致性能问题。线程池的主要目的是减少线程创建和销毁的开销，从而提高程序性能。线程池维护了…...

编程日记 2025/9/12 18:46:57

清华DeepSeek教程又双叒叕更新了！（共7份PDF下载）

清华团队的DeepSeek教程又双叒叕更新了，目前共计有7份DeepSeek的教程，分别是《DeepSeek从入门到精通》、《DeepSeek赋能职场》、《普通人如何抓住DeepSeek红利》、《DeepSeekDeepResearch：让科研像聊天一样简单》、《DeepSeek与AI幻觉》、《A…...

编程日记 2025/9/8 8:20:04

免费在线文档工具,在线PDF添加空白页,免费在任意位置插入空白页,多样化的文件处理

小白工具（https://www.xiaobaitool.net/files/pdf-add-page/ ）是一款免费的在线文档工具，专注于为用户提供便捷的 PDF 空白页添加服务。功能特点：该工具支持在 PDF 文件的任意位置插入单页或多页空白页，能满足用户不同…...

编程日记 2025/9/9 3:03:34

MATLAB在哪些特定领域比Python更有优势？

文章目录前言科学研究与工程计算数值计算信号处理控制系统设计教育领域易于学习和上手教学资源丰富快速原型开发集成开发环境便捷前言 MATLAB 在以下特定领域比 Python 更具优势： 科学研究与工程计算数值计算高效矩阵运算：MATLAB 以矩阵为基本数…...

编程日记 2025/9/5 7:11:28

CAN协议

CAN简介 TJA1050(高速CAN收发器) 5V供电界定符用来隔开各个数据这个时候就要用到采样了谁先谁后？？仲裁机制发送邮箱用来放帧的正常模式：正常收发静默模式：只收不发环回模式：不读，自己收环回静…...

编程日记 2025/9/15 10:55:30

MFC案例：用鼠标移动窗口图像的实验

当使用基于对话框的MFC项目窗口显示图像时，如窗口的尺寸小于图像的尺寸，在不做缩放的情况下按照原图尺寸在窗口显示，那么只能看到图像的局部，这时我们希望可以通过鼠标移动图像进而显示其它部分。今天就进行这个实验，编…...

编程日记 2025/9/11 6:52:54

Linux基础IO（五）之用户缓冲区

文章目录缓冲区FILE初步实现缓冲区缓冲区 FILE 因为IO相关函数与系统调用接口对应，并且库函数封装系统调用， 所以本质上，访问文件都是通过fd访问的。所以C库当中的FILE结构体内部，必定封装了fd。编写代码and查看现象&…...

编程日记 2025/9/14 0:17:44

【Scrapy】Scrapy教程12——中间件

中间件这部分算是一个高阶的Scrapy内容，即便不了解这部分也可以使用Scrapy，但是一些特殊情况使用中间件就比较方便处理了，比如修改请求和响应等。通过之前的工作原理图中，我们了解到Scrapy中有两个中间件，分别是下载器中间件和爬虫中间件，本节将一一讲解如何激活、编写自…...

编程日记 2025/9/11 7:17:44

C++学习之ORACLE①

目录 1.ORACLE数据库简介 2..ORACLE数据库安装 3..ORACLE体系结构 4..ORACLE基本概念 5..ORACLE基本元素 6..ORACLE数据库启动和关闭 7.SQLPLUS登录ORACLE数据库相关操作 8.SQLPLUS的基本操作 9.oracle中上课使用的方案 10.SQL语言分类 11.SQL中的select语句语法和注…...

编程日记 2025/9/8 8:07:45

vue---按钮防抖和节流----项目问题

一般来说前端都需要做按钮防抖避免一个时间被重复触发，首先可能会出现bug，消耗服务器性能，用户体验也不是很好。 1.防抖解决方法：main.js文件自定义指令 Vue.directive("preventReClick", {inserted(el, binding) {…...

编程日记 2025/9/6 23:20:27

【LunarVim】解决which-key 自定义键位注册不成功问题

问题描述 LunarVim将which-key设置放在一个keymaps.lua中，然后config.lua调用reload “user.keymaps”，键位没用注册成功，而直接写在config.lua中，就注册成功这暴露了LunarVim 插件和配置加载顺序的一些细节坑，下面解…...

编程日记 2025/9/16 4:09:30

湖北趣豆智能科技有限公司浅析XR技术对传统游戏的影响

在科技飞速发展的当下，XR（扩展现实）技术正以前所未有的态势重塑游戏行业格局。湖北趣豆智能科技有限公司凭借在XR技术与游乐设备融合领域的创新实践，对XR技术给传统游戏带来的影响有着深刻见解。沉浸体验升级，重塑游戏…...

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

[操作系统] 进程间通信：system V共享内存

文章目录内存共享示意图共享内存的管理代码shmget 函数原理先创建共享内存如何保证两个不同的进程拿到的是一块共享内存 shmctl 函数IPC_RMID参数 shmat函数无同步机制同步机制是什么模拟演示非同步效果如何提供保护机制 shmdt再谈描述共享内存的数据结构struct shmid_dsstruc…...

编程日记 2025/9/15 13:39:11

科技快讯 | 阿里云百炼MCP服务上线；英伟达官宣：CUDA 工具链将全面原生支持 Python

李飞飞团队最新AI报告：中美模型性能差距近乎持平 4月8日，斯坦福大学以人为本人工智能研究所发布《2025年人工智能指数报告》。报告显示，2023年AI性能显著提升，AI应用加速，投资增长，中美AI模型差距缩小。报告…...

编程日记 2025/9/11 1:15:17

踩雷，前端一直卡在获取token中

问题：一直卡在var token SecureStorage.Default.GetAsync("auth_token").Result; public VideoService(){_httpClient new HttpClient();var token SecureStorage.Default.GetAsync("auth_token");} 这是一个典型的同步等待异步操作导致的死…...

编程日记 2025/9/15 4:46:24

MATLAB双目标定

前言： 现在有许多双目摄像头在出厂时以及标定好，用户拿到手后可以直接使用，但也有些双目摄像头在出厂时并没有标定。因而这个时候就需要自己进行标定。本文主要介绍基于matlab工具箱的自动标定方式来对双目相机进行标定。 1、MATLAB工具箱标…...

编程日记 2025/9/1 7:23:03

4.10学习总结

完成两道算法题（感觉对贪心的思路很难去想到如何解） 完成stream流的学习，开始学习方法引用...

编程日记 2025/9/12 14:56:58

QML自定义组件

自定义组件是 QML 开发中的核心概念，它允许您创建可重用的 UI 元素和逻辑单元。以下是创建和使用自定义组件的完整方法。 1. 基本自定义组件创建创建单独组件文件 (推荐方式) qml // MyButton.qml（单独一个qml文件）import QtQuick 2.15R…...

编程日记 2025/9/6 22:06:18

多模态大语言模型arxiv论文略读（十）

Towards End-to-End Embodied Decision Making via Multi-modal Large Language Model: Explorations with GPT4-Vision and Beyond ➡️ 论文标题：Towards End-to-End Embodied Decision Making via Multi-modal Large Language Model: Explorations with GPT4-Vi…...

编程日记 2025/9/7 20:38:22

关于 Spring Boot + Vue 前后端开发的打包、测试、监控、预先编译和容器部署的详细说明，涵盖从开发到生产部署的全流程

以下是关于 Spring Boot Vue 前后端开发的打包、测试、监控、预先编译和容器部署的详细说明，涵盖从开发到生产部署的全流程： 1. 打包 1.1 后端（Spring Boot） 打包方式使用 Maven 或 Gradle 打包成可执行的 JAR/WAR 文件&…...

编程日记 2025/9/16 5:56:57

【Raqote】 1.1 路径填充ShaderMaskBlitter 结构体（blitter.rs）

ShaderMaskBlitter 结构体实现了 Blitter trait，用于带遮罩的着色器渲染。结构体定义 pub struct ShaderMaskBlitter<a> {pub x: i32, // 目标区域的起始x坐标pub y: i32, // 目标区域的起始y坐标pub shader: &a dyn Shader, //…...

编程日记 2025/9/14 4:00:05

如何用 esProc 实现 Oracle 和 MySQL 的混合运算

逻辑数仓可以实现多源混算，但需要配置视图、预处理数据，结构太沉重。duckdb 是轻量级的方案，但没有内置 Oracle 的 connector，自己开发难度又太高。同为轻量级方案，esProc 支持 JDBC 公共接口，可以实现任何…...

编程日记 2025/9/8 15:50:30

zabbix和prometheus选择那个监控呢

文章目录 Zabbix 介绍概述架构组成特点适用场景 Prometheus 介绍概述架构组成特点适用场景 Zabbix vs Prometheus 对比架构与组件Zabbix 架构Prometheus 架构监控要点与最佳实践告警与可视化ZabbixPrometheus Alertmanager Grafana 伸缩与高可用ZabbixPrometheus 运维成本与…...

编程日记 2025/9/12 5:18:42

SQL 查询中使用 IN 导致性能问题的解决方法

当 SQL 查询中使用 IN 子句导致查询长时间运行或挂起时，通常是由于以下几个原因造成的： 常见原因 IN 列表中的值过多 - 当 IN 子句包含大量值时（如数千或更多），数据库需要处理大量比较操作缺乏合适的索引 - 被查询的…...

编程日记 2025/9/15 0:28:25

UML-饮料自助销售系统（无法找零）序列图

一、题目： 在饮料自动销售系统中，顾客选择想要的饮料。系统提示需要投入的金额，顾客从机器的前端钱币口投入钱币，钱币到达钱币记录仪，记录仪更新自己的选择。正常时记录仪通知分配器分发饮料到机器前端，但可…...

编程日记 2025/9/12 17:41:55

Go语言中的runtime包是用来做什么的？

在Go语言中，runtime包提供了与Go运行时系统的交互接口。以下是runtime包的主要功能和用途： 1. 运行时信息 runtime包可以获取关于Go程序运行时的信息，包括： 内存使用情况：可以查看内存分配和使用的统计信息&#xf…...

编程日记 2025/9/11 8:52:13

【Linux】用C++实现UDP通信：详解socket编程流程

文章目录协议（Protocol）协议的核心要素常见协议分类 UDP协议（用户数据报协议）1. 基本定义2. 核心特性 UDP协议实现通信服务器端Comm.hppInetAddr.hppUdpServer.hppUdpServer.cc 客户端总结协议（Protocol&#xff09…...

编程日记 2025/9/10 5:18:04

代码随想录-06-二叉树-02.二叉树的递归遍历

二叉树的递归遍历递归思路确定递归函数的参数parameter和返回值确定终止条件确定单层递归逻辑具体代码 CPP 前序遍历 vector<int> res; void traversal(TreeNode *root){if(!root)return;res.push_back(root->val);traversal(root->left);traversal(root-…...

编程日记 2025/9/10 1:27:38

一文详解ffmpeg环境搭建：Ubuntu系统ffmpeg配置nvidia硬件加速

在Ubuntu系统下安装FFmpeg有多种方式，其中最常用的是通过apt-get命令和源码编译安装。本文将分别介绍这两种方式，并提供安装过程。一、apt-get安装使用apt-get命令安装FFmpeg是最简单快捷的方式，只需要在终端中输入以下命令即可： # 更新软件包列表 sudo apt-get updat…...

编程日记 2025/9/12 14:35:04

（四）深入理解AVFoundation-播放：高度自定义视频播放器 UI

引言在之前的博客中，我们已经介绍了如何实现一个简单的播放器，并通过监听资源和播放器的属性来提升播放体验。因此本篇博客将带你进一步自定义播放器 UI。通过构建自己的播放控制界面（如播放/暂停按钮、进度条、全屏切换等）&…...

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

sqli-labs靶场 less6

文章目录 sqli-labs靶场less 6 报错注入 sqli-labs靶场每道题都从以下模板讲解，并且每个步骤都有图片，清晰明了，便于复盘。 sql注入的基本步骤注入点注入类型字符型：判断闭合方式 （‘、"、’、“”&#xf…...

编程日记 2025/9/6 15:40:40

数据库架构全解析：MyCat、MHA、ProxySQL 的原理、功能与实例

前言 ： 在分布式数据库架构中，分库分表、高可用性（HA）和查询优化是核心需求。本文将深入解析三款主流工具：MyCat（分布式数据库中间件）、MHA（MySQL高可用方案）、ProxySQL…...

编程日记 2025/9/12 7:08:10

【hadoop】Hive数据仓库安装部署

一、MySQL的安装与配置换源： 最下面附加部分 1、在master上直接使用yum命令在线安装MySQL数据库： sudo yum install mysql-server 途中会询问是否继续，输入Y并按回车。 2、启动MySQL服务： sudo service mysqld start 3、设…...

编程日记 2025/9/11 15:35:08

Unity Addressables资源生命周期自动化监控技术详解

一、Addressables资源生命周期管理痛点 1. 常见资源泄漏场景泄漏类型典型表现检测难度隐式引用泄漏脚本持有AssetReference未释放高异步操作未处理AsyncOperationHandle未释放中循环依赖泄漏资源相互引用无法释放极高事件订阅泄漏未取消事件监听导致对象保留高 2. 传统管理…...

编程日记 2025/9/15 4:46:26

Linux网络编程——深入理解TCP的可靠性、滑动窗口、流量控制、拥塞控制

目录一、前言二、流量控制三、TCP的滑动窗口 1、原理 2、机制 3、数据重发 Ⅰ、只是确认应答包(ACK)丢了 Ⅱ、发送数据包丢失 4、缓冲区结构四、TCP的拥塞控制 1、慢启动 2、拥塞避免 3、快速重传 4、快速恢复五、延迟应答六、捎带应答七、再谈TCP的面…...

编程日记 2025/9/10 22:26:15

一. 目录

二. 防抖（Debounce）

三. 节流（Throttle）

四. 进阶应用

五. 总结

相关文章：