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

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

news 2026/2/4 23:46:45

请添加图片描述

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

  • 理解防抖（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

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2026/2/3 15:24:36

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

编程新知 2026/1/31 7:34:26

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2026/1/31 23:44:39

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/1/23 9:58:42

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2026/1/24 14:16:56

「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案

在移动互联网营销竞争白热化的当下&#xff0c;推客小程序系统凭借其裂变传播、精准营销等特性&#xff0c;成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径&#xff0c;助力开发者打造具有市场竞争力的营销工具。​ 一、系统核心功能架构&…...

编程新知 2025/8/21 16:28:18

高防服务器价格高原因分析

高防服务器的价格较高&#xff0c;主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因&#xff1a; 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器&#xff0c;因此…...

编程新知 2025/12/8 14:33:23

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2026/2/4 19:50:05