十七. 函数的防抖和节流

最新推荐文章于 2025-08-23 17:46:48 发布
原创 最新推荐文章于 2025-08-23 17:46:48 发布 · 369 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了防抖与节流的概念及其在前端开发中的应用场景。防抖技术确保在规定时间内只执行最后一次操作，常用于输入验证、窗口滚动事件处理。节流则限制了回调函数的执行频率，适用于频繁触发的事件如定时刷新，如在三级联动设置中应用。通过这两种技术，可以有效优化性能，避免资源浪费。

1. 防抖

（1）定义

  • 在要求时间间隔内，所有触发只会执行最后一次。
  • 意思就是：连续的触发，只会执行一次

2. 节流

（1）定义

  • 在规定的时间间隔内，不会触发重复回调。
  • 只有大于时间间隔才会触发重复回调。
  • 把频繁触发变为少量触发！

（2）举例及使用步骤

尚品汇第25集——三级联动设置为节流
https://www.yuque.com/u22137022/mxlsc1/tobgl3/edit

js 函数节流和函数防抖及区别详解
@必意玲
04-20 822
浏览器中总是有一些操作非常耗费性能。所以就有了函数节流和函数防抖来提高浏览器性能。函数节流：频繁触发一个事件时候，每隔一段时间，函数只会执行一次。函数防抖：当触发一个时间后的n秒内，如果该事件没有被第二次触发，则执行。否，则重新开始计时。不论是函数防抖还是函数节流，都是性能优化的一种手段，都是为阻止函数无意义的执行，减小dom压力，避免不必要的性能浪费。以上是封装好的防抖，节流函数。大家可自取。
JS函数节流和函数防抖问题分析
10-18
JavaScript中的函数节流（throttle）和函数防抖（debounce）是两种常见的优化策略，它们主要用于控制函数的执行频率，以避免在高频率事件触发时导致性能问题或不必要的资源消耗。 函数防抖（debounce）的核心思想是...
函数防抖和函数节流
qq_45643879的博客
08-07 291
函数防抖&函数节流
函数防抖和节流
欢迎观看我的前端知识合集~
11-16 937
函数防抖和节流
js知识点之函数防抖和节流
fyw1789的博客
06-03 912
JavaScript中的函数大多数情况下都是由用户主动调用触发的，除非是函数本身的实现不合理，否则一般不会遇到跟性能相关的问题。但是在一些少数情况下，函数的触发不是由用户直接控制的。在这些场景下，函数有可能被非常频繁地调用，而造成大的性能问题。解决性能问题的处理办法就有和。下面是函数被频繁调用的常见的几个场景：mousemove事件：如果要实现一个拖拽功能，需要一路监听mousemove事件，在回调中获取元素当前位置，然后重置DOM的位置来进行样式改变。
JS | JavaScript函数防抖和节流全解析
青春木鱼的博客
09-10 3130
防抖和节流本质上是优化高频率执行代码的一种手段，如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能。为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 防抖（debounce）和 节流（throttle）的方式来减少调用频率。节流——n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。防抖——n 秒后再执行该事件，若在 n 秒内被重复触发，则重新计时.........
手写防抖和节流函数
热门推荐
zep
03-16 1万+
一、认识防抖debounce函数 我们用一副图来理解一下它的过程： 当事件触发时，相应的函数并不会立即触发，而是会等待一定的时间； 当事件密集触发时，函数的触发会被频繁的推迟； 只有等待了一段时间也没有事件触发，才会真正的执行响应函数； 防抖的应用场景很多： 输入框中频繁的输入内容，搜索或者提交信息； 频繁的点击按钮，触发某个事件； 监听浏览器滚动事件，完成某些特定操作； 用户缩放浏览器的resize事件； 总结：防抖其实是延迟函数的执行，只有当等待了一段时间也没有事件触发时，才会真正去执行函数 1.
JavaScript函数防抖与节流
chanyeol14805的博客
08-23 806
在前端开发中，我们经常需要处理各种高频触发的事件，比如窗口 resize、滚动事件、输入框输入等。如果不对这些事件的处理函数加以限制，频繁的执行会导致性能问题，影响用户体验。函数防抖（Debounce）和节流（Throttle）就是解决这类问题的两种重要技术。 本文将介绍防抖和节流的实现原理、应用场景，并深入解析实现过程中的关键细节。
js函数防抖和节流
前端-卡布达的博客
12-13 967
js 防抖 节流
vue 防抖函数和节流函数
Jana Jing的分享
06-17 2623
export default { /** * 函数防抖 * 触发事件后在n秒后执行，如果n秒内又触发事件，则重新计算时间 */ debounce(fn, wait = 1000) { let timer; return function () { let context = this; let args = arguments; if (timer) clearTimeout(timer); timer = set.
浅析JavaScript 函数防抖和节流
01-19
函数防抖和节流都是对高频动作触发回调函数的一个优化，实现方式上有类似之处。先从使用场景做个区分。 防抖使用场景： 表单输入框校验 提交按钮避免重复提交 节流使用场景： scroll,mousemove,resize等 函数防抖...
布线问题 分支限界算法-下载即用.zip
01-01
下载方式：https://pan.quark.cn/s/a4b39357ea24 布线问题（分支限界算法）是计算机科学和电子工程领域中一个广为人知的议题，它主要探讨如何在印刷电路板上定位两个节点间最短的连接路径。 在这一议题中，电路板被构建为一个包含 n×m 个方格的矩阵，每个方格能够被界定为可通行或不可通行，其核心任务是定位从初始点到最终点的最短路径。 分支限界算法是处理布线问题的一种常用策略。 该算法与回溯法有相似之处，但存在差异，分支限界法仅需获取满足约束条件的一个最优路径，并按照广度优先或最小成本优先的原则来探索解空间树。 树 T 被构建为子集树或排列树，在探索过程中，每个节点仅被赋予一次成为扩展节点的机会，且会一次性生成其全部子节点。 针对布线问题的解决，队列式分支限界法可以被采用。 从起始位置 a 出发，将其设定为首个扩展节点，并将与该扩展节点相邻且可通行的方格加入至活跃节点队列中，将这些方格标记为 1，即从起始方格 a 到这些方格的距离为 1。 随后，从活跃节点队列中提取队首节点作为下一个扩展节点，并将与当前扩展节点相邻且未标记的方格标记为 2，随后将这些方格存入活跃节点队列。 这一过程将持续进行，直至算法探测到目标方格 b 或活跃节点队列为空。 在实现上述算法时，必须定义一个类 Position 来表征电路板上方格的位置，其成员 row 和 col 分别指示方格所在的行和列。 在方格位置上，布线能够沿右、下、左、上四个方向展开。 这四个方向的移动分别被记为 0、1、2、3。 下述表格中，offset[i].row 和 offset[i].col（i=0,1,2,3）分别提供了沿这四个方向前进 1 步相对于当前方格的相对位移。 在 Java 编程语言中，可以使用二维数组...
EP1C3T144C8 FPGA开发板设计
01-01
先看效果： https://pan.quark.cn/s/03f8ba0ff118 ### FPGA开发板设计相关知识要点#### 1. FPGA基本概念- **定义**: 现场可编程门阵列（Field Programmable Gate Array, FPGA）属于半定制型集成电路，允许在完成制造后通过编程来设定其内部逻辑及连接配置，从而达成特定的功能实现。- **特性**: - 运行速度快 - 功耗相对较低 - 适用于复杂系统构建 - 可在现场进行重新编程- **应用范畴**: - 通信领域 - 自动控制系统 - 信息处理技术 - 数据加密方案 - 视频处理技术 - 车载电子系统 - 医疗器械设备等#### 2. EP1C3T144C8芯片介绍- **生产商**: Altera Corporation（现归属于Intel公司）- **系列归属**: Cyclone系列- **技术工艺**: 1.5V核心供电电压，采用0.13微米制造工艺- **资源参数**: - 包含2910个逻辑单元（LEs） - 提供高达59904位的嵌入式存储器 - 支持单个PLL（Phase Locked Loop，锁相环） - 最多可支持104个用户I/O接口- **优点**: - 价格经济 - 集成度高 - 片上资源丰富 - 灵活性强#### 3. 硬件电路设计原理##### 3.1 硬件电路整体构造- **构成部分**: - 下载电路: 负责将设计好的程序传送至FPGA中。 - 下载接口: 实现个人计算机与FPGA之间的数据交换。 - FPGA核心部件: EP1C3T144C8芯片。 - 电源电路: 提供必要的电源支持。 - 扩展接口: 用于连接各类传感器或扩展模块。###...
HIT-CSAPP2025大作业报告.doc
最新发布
01-01
HIT-CSAPP2025大作业报告.doc
NTC热敏电阻温度测量技术及线性电路
01-01
下载前必看：https://pan.quark.cn/s/9cf3e6e84d3a ntc-temperature-measurement NTC 热敏电阻温度测量原理、电路设计与代码实现 ！ ！ ！ 目前只是Test Board版本，后续更新硬件改进后的版本！ ！ ！ ntc-temperature-measurement/ ├── 32K闪存增强通用型MCU CH32V005 - 南京沁恒微电子股份有限公司 #Internet快捷方式 CH32V005官网网址 ├── CH32V006DS0.PDF # CH32V006/V005 数据手册 ├── CH32V00XRM.PDF # CH32V00X 应用手册 ├── zhca858a.pdf # TI参考文档：利用 NTC 电路感测温度 ├── Temp Measurement Design.ms14 # 参考TI的设计的电路 ├── 103F3950阻值对照表.doc # NTC电阻手册 ├── 阻值对照温度数据_0.1℃精度.txt ├── NTC/ # MounRiver工程 │ ├── NTC.wvproj # 工程WVPROJ文件 │ └── ......
VC++对话框背景图片设置
01-01
源码来自：https://pan.quark.cn/s/a4b39357ea24 在VC++开发过程中，对话框（CDialog）作为典型的用户界面组件，承担着与用户进行信息交互的重要角色。 在VS2008SP1的开发环境中，常常需要满足为对话框配置个性化背景图片的需求，以此来优化用户的操作体验。 本案例将系统性地阐述在CDialog框架下如何达成这一功能。 首先，需要在资源设计工具中构建一个新的对话框资源。 具体操作是在Visual Studio平台中，进入资源视图（Resource View）界面，定位到对话框（Dialog）分支，通过右键选择“插入对话框”（Insert Dialog）选项。 完成对话框内控件的布局设计后，对对话框资源进行保存。 随后，将着手进行背景图片的载入工作。 通常有两种主要的技术路径：1. **运用位图控件（CStatic）**：在对话框界面中嵌入一个CStatic控件，并将其属性设置为BST_OWNERDRAW，从而具备自主控制绘制过程的权限。 在对话框的类定义中，需要重写OnPaint()函数，负责调用图片资源并借助CDC对象将其渲染到对话框表面。 此外，必须合理处理WM_CTLCOLORSTATIC消息，确保背景图片的展示不会受到其他界面元素的干扰。 ```cppvoid CMyDialog::OnPaint(){ CPaintDC dc(this); // 生成设备上下文对象 CBitmap bitmap; bitmap.LoadBitmap(IDC_BITMAP_BACKGROUND); // 获取背景图片资源 CDC memDC; memDC.CreateCompatibleDC(&dc); CBitmap* pOldBitmap = m...
Docker拉取镜像报错解决[项目源码]
01-01
文章详细介绍了在Docker拉取镜像时遇到的`no such host`错误的解决方法。首先，需要修改`/etc/resolv.conf`文件，注释掉原有的nameserver并添加新的nameserver 8.8.8.8。其次，在`/etc/NetworkManager/NetworkManager.conf`文件的[main]部分添加dns=none配置。最后，重启Docker服务以应用更改。文章还提到，该方法同样适用于解决`connect: network is unreachable`的错误。
Watt Toolkit加速器（steam++加速器）
01-01
Watt Toolkit（原名 Steam++）是一款开源免费、支持 Windows、macOS、Linux、Android、iOS 等多平台的全能游戏工具箱，它以本地反向代理技术为核心，既能定向优化 Steam、Epic、Uplay 等十余款游戏平台的网络环境，解决社区、创意工坊访问卡顿或 - 118 错误等问题，提升游戏下载与浏览速度，又集成了多账号切换、本地加密存储令牌、交易批量确认、游戏成就管理、云存档编辑、自动挂卡、无边框窗口化、自动领取 Epic 周免游戏等丰富实用功能，其代码托管于 GitHub、Gitee，全程无隐藏收费与恶意插件，操作简洁直观，无需复杂配置即可一键启用，是兼顾便捷性与安全性的游戏玩家必备工具。
STM32串口与LED控制
01-01
源码来自：https://pan.quark.cn/s/a4b39357ea24 CMSIS NN Lib example armnnexamplecifar10 for Cortex-M4 and Cortex-M7. The example is configured for uVision Simulator.
JS函数防抖和节流的区别
09-04
JS函数防抖和节流是两种不同的技术,用于解决类似的问题。 防抖(debounce)指在一定时间内只执行一次函数,如果在这段时间内再次触发函数,则重新计时。这通常用于用户输入或窗口调整等场景,以防止不必要的计算或请求。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值