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

『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景

news 2025/10/31 5:54:25

请添加图片描述

请添加图片描述
📣读完这篇文章里你能收获到

  • 理解防抖（Debouncing）和节流（Throttling）的概念：了解这两种性能优化技术如何帮助我们更有效地处理频繁触发的事件
  • 掌握防抖与节流的实现方法：学习如何在JavaScript中实现防抖和节流函数，并理解其工作原理
  • 应用防抖与节流技术：了解在实际开发中何时以及如何使用防抖和节流来优化用户交互和提升页面性能

请添加图片描述

文章目录

  • 一、防抖（Debouncing）
    • 1. 防抖的概念
    • 2. 防抖的使用场景
    • 3. 防抖的实现
  • 二、节流（Throttling）
    • 1. 节流的概念
    • 2. 节流的使用场景
    • 3. 节流的实现
  • 三、如何选择防抖或节流

请添加图片描述

一、防抖（Debouncing）

1. 防抖的概念

防抖是一种优化技术，用于减少短时间内连续触发同一事件时的处理次数。当一个事件被频繁触发时，防抖函数会忽略后续的触发，直到一段时间内没有新的触发发生，再执行一次事件处理器。

2. 防抖的使用场景

防抖常用于以下场景：

  • 输入框实时搜索或自动完成：当用户在输入框中快速输入时，防抖可以确保在用户停止输入一段时间后再发起请求，避免频繁请求服务器。
  • 地图拖拽或其他持续性用户交互：在地图拖拽等持续性用户交互中，防抖可以减少不必要的计算和渲染，提高性能。

3. 防抖的实现

以下是一个简单的防抖功能实现：
在这个实现中，创建了一个返回新函数的debounce函数。新函数内部清除已有的定时器，并设置一个新的定时器，在指定的延迟时间后执行原函数。

<!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="searchInput" placeholder="Search..."><script>// 防抖函数实现function debounce(func, delay) {let timeoutId; // 定时器ID用于清除定时器return function() {clearTimeout(timeoutId); // 清除已有的定时器const context = this;const args = arguments;// 设置一个新的定时器，在指定的延迟时间后执行原函数timeoutId = setTimeout(function() {func.apply(context, args);}, delay);};}// 获取输入框元素let searchInput = document.getElementById("searchInput");// 使用防抖处理输入框的keyup事件searchInput.addEventListener("keyup", debounce(function() {console.log("Search input changed, debounced.");}, 300)); // 延迟时间为300毫秒</script></body>
</html>

请添加图片描述

二、节流（Throttling）

1. 节流的概念

节流是一种优化技术，用于限制在同一时间段内事件处理器的执行次数。即使事件被频繁触发，节流函数也会确保事件处理器在每个时间段内只执行一次。

2. 节流的使用场景

节流常用于以下场景：

  • 窗口大小改变时的布局调整：当用户快速调整窗口大小时，节流可以确保在每个时间段内只执行一次布局调整操作，避免过度渲染。
  • 滚动事件的处理：滚动事件可能会非常频繁地触发，节流可以限制滚动事件处理器的执行频率，提高性能。

3. 节流的实现

以下是一个简单的节流功能实现：
在这个实现中，创建了一个返回新函数的throttle函数。新函数内部检查当前时间与上一次执行时间的差值是否大于指定的延迟时间，如果是，则执行原函数并更新上一次执行时间。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Throttle Example</title><style>.container {width: 100%;height: 100vh;background-color: lightblue;}</style></head><body><div class="container"></div><script>// 节流函数实现function throttle(func, delay) {let lastExecution = 0; // 记录上一次执行的时间return function() {const currentTime = Date.now(); // 获取当前时间if (currentTime - lastExecution > delay) { // 如果距离上一次执行的时间大于延迟时间func.apply(this, arguments); // 执行原函数lastExecution = currentTime; // 更新上一次执行的时间}};}// 获取容器元素let container = document.querySelector(".container");// 使用节流处理窗口大小改变事件window.addEventListener("resize", throttle(function() {console.log("Window resized, throttled.");}, 200)); // 延迟时间为200毫秒</script></body>
</html>

请添加图片描述

三、如何选择防抖或节流

在实际开发中，选择防抖还是节流取决于具体的需求：

  • 如果需要在用户停止操作一段时间后再执行事件处理器，例如搜索框输入完成后才发起请求，应选择防抖。
  • 如果需要在每个时间段内至少执行一次事件处理器，但限制执行频率，例如滚动事件的处理，应选择节流。

请添加图片描述

请添加图片描述

相关文章：

『JavaScript』全面解析JavaScript中的防抖与节流技术及其应用场景

&#x1f4e3;读完这篇文章里你能收获到 理解防抖&#xff08;Debouncing&#xff09;和节流&#xff08;Throttling&#xff09;的概念&#xff1a;了解这两种性能优化技术如何帮助我们更有效地处理频繁触发的事件掌握防抖与节流的实现方法&#xff1a;学习如何在JavaScript中…...

编程日记 2023/12/29 20:32:34

智能优化算法应用：基于袋獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于袋獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于袋獾算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.袋獾算法4.实验参数设定5.算法结果6.参考文献7.MA…...

编程日记 2023/12/29 20:31:33

Ubuntu20.04-查看GPU的使用情况及输出详解

1. 查看GPU的使用情况 1.1 nvidia-smi # 直接在终端得到显卡的使用情况 # 不会自动刷新 nvidia-smi# 重定向到文件中 nvidia-smi > nvidia_smi_output.txt# 如果输出的内容部分是以省略号表示的&#xff0c;可以-q nvidia-smi -q 1.2 nvidia-smi -l # 会自动刷新&#x…...

编程日记 2023/12/29 20:30:32

Python中的数据序列

Python中的数据序列 一、作业回顾 1、求幸运数字6 幸运数字6（只要是6的倍数）：输入任意数字，如数字8，生成nums列表，元素值为1~8，从中选取幸运数字移动到新列表lucky，打印nums与lucky。 # 第一步：定义二个空列表 nums = [] lucky = [] # 第二步：提示用户输入数字 n…...

编程日记 2023/12/29 20:26:28

带您了解目前AI在测试领域能够解决的那些问题

AI在测试领域主要应用场景 话不多说&#xff0c;直接给结论&#xff1a; 接口测试脚本的自动生成和校验&#xff08;依赖研发ai工具&#xff09;测试用例的自动生成UI自动化测试脚本的自动生成和校验测试文档的自动生成快速了解初涉的业务领域 关于ai对研发和测试的整体影响…...

编程日记 2023/12/29 20:24:25

Jmeter学习总结(2)——时间参数化time

13位的时间戳精确都毫秒级别。 常用的时间定义格式如下&#xff1a; log.info("${__time(,ts)}"); log.info("${ts}"); log.info(vars.get("ts")); //136232232232log.info("${__time(yyyy-MM-dd,)}"); //当前年月日2023-12-2…...

编程日记 2023/12/29 20:20:20

Leetcode 746 使用最小花费爬楼梯

题意理解&#xff1a; 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。 一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯 目标&#xff1a;使用最小的花…...

编程日记 2023/12/29 20:16:16

2023/12/21作业

思维导图 代码 .text .global _start _start: 灯1 gpio时钟使能 [4]->1 0x5000A28 LDR R0,0x50000A28 指定寄存器地址 LDR R1,[R0]将寄存器取出放到R1 ORR R1,R1,#(0x1<<4)将第四位设置为1 STR R1,[R0]读取R0寄存器到R1 PE…...

编程日记 2023/12/29 20:09:10

Python 数据类型 (2)

1 集合类型&#xff1a;一维数组的集合 List列表是一个有序且可变的集合。允许重复成员。 turple元组是一个有序且不可更改的集合。允许重复成员。 Set集合是一个无序且无索引的集合。没有重复的成员。 dict字典是一个有序*且可变的集合。没有重复的成员。 &#xff01;&#x…...

编程日记 2023/12/29 20:07:08

【教程】自动检测和安装Python脚本依赖的第三方库

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhang.cn] 背景说明 对于新python环境&#xff0c;要运行某个脚本&#xff0c;可能需要安装很多库&#xff0c;一般可以通过提供的requirements.txt来自动安装。但如果没有这个txt&#xff0c;那就得手动一个一个安装&#…...

编程日记 2023/12/29 20:05:07

0开始配置Cartographer建图和导航定位

0开始配置Cartographer 日期&#xff1a;12-19 硬件&#xff1a;激光雷达IMU 小车的tf变换&#xff1a; 建图配置 lua文件配置&#xff1a;my_robot.lua include "map_builder.lua" include "trajectory_builder.lua"options {map_builder MAP_BUILDE…...

编程日记 2023/12/29 20:04:06

Python中使用SQLite数据库的方法2-2

3.3.2 创建表单及字段 通过“3.2 创建Cursor类的对象”中创建的Cursor类的对象cur创建表单及字段&#xff0c;代码如图5所示。 图5 创建表单及字段 从图5中可以看出&#xff0c;通过Cursor类的对象cur调用了Cursor类的execute()方法来执行SQL语句。该方法的参数即为要指定的S…...

编程日记 2023/12/29 20:00:01

零代码也能玩出花：Mugeda在H5设计中的魔法力量

文章目录 一、Mugeda零代码可视化H5设计工具简介二、Mugeda零代码可视化H5设计实战案例1. 注册并登录Mugeda账号2. 选择模板3. 编辑页面内容4. 添加动画效果5. 预览和发布 三、Mugeda零代码可视化H5设计的优势《Mugeda零代码可视化H5设计实战》内容简介作者简介目录前言/序言 随…...

编程日记 2023/12/29 19:56:58

分布式、CAP 和 BASE 理论

在计算机科学领域&#xff0c;分布式系统是一门极具挑战性的研究方向&#xff0c;也是互联网应用中必不可少的优化实践&#xff0c;而 CAP 理论和 BASE 理论则是分布式系统中的两个关键的概念。 什么是分布式系统 首先&#xff0c;让我们来谈谈分布式系统。你可以将分布式系统…...

编程日记 2023/12/29 19:55:57

django之drf框架（两个视图基类、5个扩展视图类、9个视图子类）

两个视图基类 APIView和GenericAPIView drf提供的最顶层的父类就是APIView&#xff0c;以后所有的类都继承自他 GenericAPIView继承自APIView&#xff0c;他里面封装了一些工能 基于APIViewModelSerializerResposne写5个接口 子路由&#xff1a;app01>>>urls.py …...

编程日记 2023/12/29 19:54:56

23种设计模式学习

设计模式的分类 总体来说设计模式分为三大类&#xff1a; 创建型模式&#xff0c;共五种&#xff1a;工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。 结构型模式&#xff0c;共七种&#xff1a;适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合…...

编程日记 2023/12/29 19:52:55

php 8.4 xdebug扩展编译安装方法

最新版php8.4 xdebug扩展只能通过编译方式安装, pecl是安装不了的, 编译方法如下 下载最新版xdebug git clone https://github.com/xdebug/xdebug.git 却换入xdebug目录执行编译安装xdebug cd xdebug phpize./configure --enable-xdebugmakemake install3. 配置启用xdebug 这…...

编程日记 2023/12/29 19:51:54

66biolinks v42.0.0 已注册 – 生物短链接、URL 缩短器、QR 码和 Web 工具 （SAAS） 源码

66biolinks v42.0.0&#xff1a;全能生物短链接与网络工具平台 一、开篇介绍 66biolinks v42.0.0是一款集生物链接、URL缩短器、二维码和网络工具于一体的综合性软件解决方案。作为社交生物链接平台的佼佼者&#xff0c;66biolinks提供了全方位的功能&#xff0c;旨在满足用户…...

编程日记 2023/12/29 19:48:51

《Vue2.X 进阶知识点》- 防 ElementUI Divider 分割线

前言 使用 el-divider 背景为白色是没问题的。 但当背景换成其它颜色&#xff0c;问题就出现了&#xff01;&#xff01; 仔细看原来是两层&#xff0c;默认背景色是白色。 想着把背景色改为透明应该能用&#xff0c;结果发现背面是一条实线&#xff0c;难怪要用白色遮挡…不符…...

编程日记 2023/12/29 19:47:50

【第十二课】KMP算法(acwing-831 / c++代码 / 思路 / 视频+博客讲解推荐)

目录 暴力做法 代码如下 KMP算法 不同的next求法-----视频讲解/博客推荐 视频推荐 博客推荐 课本上的方法- prefix的方法- 求next数组思路---next数组存放前缀表的方式 s和p匹配思路 代码如下 暴力做法 遍历s主串中每一个元素&#xff0c;如果该元素等于模板串p中…...

编程日记 2023/12/29 19:44:48

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/10/29 8:40:32

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/9/14 16:40:54

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2025/10/23 5:47:33

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/10/31 2:55:19

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数

高效线程安全的单例模式：Python 中的懒加载与自定义初始化参数 在软件开发中，单例模式（Singleton Pattern）是一种常见的设计模式，确保一个类仅有一个实例，并提供一个全局访问点。在多线程环境下，实现单例模式时需要注意线程安全问题，以防止多个线程同时创建实例，导致…...

编程新知 2025/9/20 21:58:29

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

编程新知 2025/10/26 16:37:19

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

编程新知 2025/10/26 17:23:14