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

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

news 2026/3/28 12:05:41

请添加图片描述

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

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

Fish Speech 1.5开源模型合规指南：商用授权范围与衍生作品注意事项

Fish Speech 1.5开源模型合规指南&#xff1a;商用授权范围与衍生作品注意事项 Fish Speech 1.5 以其出色的多语言语音合成能力&#xff0c;正吸引着越来越多的开发者和企业将其集成到自己的产品中。然而&#xff0c;开源模型的使用并非“法外之地”&#xff0c;尤其是当你计划…...

编程新知 2026/3/28 11:11:16

告别英文界面：VSCode 最新版中文语言包安装与配置全攻略（Windows/macOS通用）

告别英文界面&#xff1a;VSCode 最新版中文语言包安装与配置全攻略&#xff08;Windows/macOS通用&#xff09; 作为一名长期使用VSCode的开发者&#xff0c;我深知英文界面给非英语母语用户带来的困扰。菜单栏里那些专业术语、设置项中的生僻词汇&#xff0c;常常让我们在开…...

编程新知 2026/3/28 10:16:44

Windows驱动级输入模拟终极指南：Interceptor技术深度解析与应用实战

Windows驱动级输入模拟终极指南&#xff1a;Interceptor技术深度解析与应用实战 【免费下载链接】Interceptor C# wrapper for a Windows keyboard driver. Can simulate keystrokes and mouse clicks in protected areas like the Windows logon screen (and yes, even in gam…...

编程新知 2026/3/28 10:02:40

微信小程序-live-player-实时视频-截图与文件流转换实战

1. 微信小程序live-player组件基础使用 微信小程序的live-player组件是专门用于播放实时视频流的核心组件。我在多个实际项目中使用过这个组件&#xff0c;发现它比普通的video组件更适合直播场景。live-player支持RTMP、FLV等常见直播协议&#xff0c;延迟可以控制在3秒以内&…...

编程新知 2026/3/28 9:14:15

驱动开发的常用工具

2.3.3 驱动开发的常用工具 嵌入式驱动开发涉及硬件调试、软件调试、代码编译等多个环节，掌握合适的工具可以大幅提升开发效率。本节将系统介绍驱动开发中常用的四大类工具：交叉编译工具链、调试工具、开发板与仿真器、文档与源码工具，并结合RK3588平台给出具体的使用方法。…...

编程新知 2026/3/28 9:14:14

当游戏语言成为障碍：如何用XUnity.AutoTranslator打破语言壁垒

当游戏语言成为障碍&#xff1a;如何用XUnity.AutoTranslator打破语言壁垒 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 想象一下&#xff0c;你终于等到了期待已久的日式角色扮演游戏&#xff0c;但打…...

编程新知 2026/3/28 9:04:01

FRP内网穿透实战：从零配置到远程访问

1. 为什么需要内网穿透&#xff1f; 想象一下这个场景&#xff1a;你在家里搭建了一个NAS私有云&#xff0c;存了几百部高清电影&#xff1b;或者你在办公室电脑上跑了个数据库服务&#xff0c;出差时想随时查看数据。这时候你会发现——这些服务都在内网环境里&#xff0c;离…...

编程新知 2026/3/28 8:35:54

OpenClaw多任务调度：nanobot并行处理邮件与文件整理

OpenClaw多任务调度&#xff1a;nanobot并行处理邮件与文件整理 1. 为什么需要多任务调度 当我第一次尝试用OpenClaw自动化处理日常工作流时&#xff0c;遇到了一个典型问题&#xff1a;当同时需要监控邮件和处理大文件时&#xff0c;系统资源会被单一任务占满。比如在整理几…...

编程新知 2026/3/28 5:38:05

AOP 代理对象的诞生时刻：Bean 生命周期中的“夺舍”瞬间

各位大佬&#xff0c;欢迎来到 Spring 容器最神秘、最惊心动魄的现场&#xff01;很多人以为 AOP 是“天生”的&#xff0c; Bean 一出生就带着光环。大错特错&#xff01;不过是前人在负重前行&#xff1a;Spring 先造出一个“纯净的肉身”&#xff08;原始对象&#xff09;&a…...

编程新知 2026/3/28 4:46:03

从轨迹到网络：广州休闲步行空间格局刻画 | 论文全解析与方法论深度拆解

从轨迹到网络：广州休闲步行空间格局刻画 | 论文全解析与方法论拆解 原文：From trajectories to network: Delineating the spatial pattern of recreational walking in Guangzhou》 一、论文核心概览：摘要与关键词 1.1 核心摘要解析 本文的核心内容可拆解为5个核心模块，…...

编程新知 2026/3/28 4:36:01