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

了解防抖和节流：提升前端交互体验的实用策略

news 2025/9/22 0:37:02

了解防抖和节流：提升前端交互体验的实用策略

  • 前言
  • 什么是防抖？
  • 什么是节流？
  • 应用实例
    • 防抖实例
    • 节流实例

前言

本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理，然后探讨了它们在前端开发中的应用场景，如输入框搜索、滚动事件等。最后，通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术，我们可以有效地减少不必要的函数执行次数，提高页面响应速度，从而改善用户体验。

什么是防抖？

定义：延迟一段时间再触发，如果再延迟时间内又触发，则清除上一个定时，再开始新的定时。
应用场景：搜索框联想、屏幕伸缩。

什么是节流？

定义：在一段时间间隔内，稀释事件的触发频率，不论事件被触发几次，只执行一次。
应用场景：
单位时间内，鼠标不论点击多少次，只执行一次（搜索内容未变化时）。
在使用列表下拉滚动加载时，用于定时监听滚动事件。

应用实例

防抖实例

下面是用防抖实现一个简易版搜索框联想+防抖

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><header><h1>防抖解决搜索联想词</h1></header><main><input type="text" id="search-input" placeholder="Search..."><ul id="suggestions-list"></ul></main><script>// 1.防抖函数function debounce(func, delay) {let timer;return function (...args) {clearTimeout(timer);timer = setTimeout(() => {func.apply(this, args);}, delay);};}// 2.定义两个变量分别存储输入框id和联想词idconst searchInput = document.getElementById('search-input');const suggestionsList = document.getElementById('suggestions-list');// 3.模拟异步请求获取联想词function fetchSuggestions(keyword) {const suggestions = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig'];renderSuggestions(suggestions.filter(suggestion =>suggestion.toLowerCase().startsWith(keyword.toLowerCase())));}// 4.联想词显示函数function renderSuggestions(suggestions) {suggestionsList.innerHTML = '';suggestions.forEach((suggestion) => {const listItem = document.createElement('li');listItem.textContent = suggestion;suggestionsList.appendChild(listItem);});}// 定义默认方法，调用闭包方法，设置定时时间和防抖结束后调用的函数const debounceFetchSuggestions = debounce(fetchSuggestions, 1000);// 给输入框id增加监听器searchInput.addEventListener('input', function () {// 获取去空格value值const keyword = searchInput.value.trim();// 调用闭包方法debounceFetchSuggestions(keyword);});</script>
</body>
</html>

讲解代码
1.在html代码中写input、ul，一个用来输入，一个用来返回联想词，并给它们设置id值用于添加监听以及更新内容。
2.定义防抖函数：debounce
外层两个参数分别存储防抖事件处理方法以及延迟毫秒数。
timer用于存储定时器的引用。内部返回的闭包函数如果在延迟时间内再次被调用，则timer重置，且重新开始计时。
如果延迟时间内没有再次被调用，则调用func也就是fetchSuggestions函数，这里用到了一个方法apply，该方法有两个参数，第一个参数决定this指向的是哪个上下文环境，这里指向的是当前上下文环境，第二个为普通参数。
3.定义两个变量searchInput、suggestionsList分别把input和ul的id进行赋值。
4.模仿异步接口写方法，该方法第一层是定义了所有联想词，第二层是调用联想词显示函数。这里用到filter过滤和筛选，这里就不赘述了。
5.联想词显示函数，这里用到的是forEach遍历，createElement创建HTML元素，以及用li和appendchild加元素。
6.定义默认方法，并且设置事件处理方法和延迟毫秒数。
7.给输入框加监听器监听器中使用trim去除空格，且调用闭包函数。

节流实例

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><header><h1>节流解决搜索联想词</h1></header><main><input type="text" id="searchInput"></main><script>const searchInput = document.getElementById('searchInput');function search(query) {// 模拟搜索操作，这里可以替换为实际的搜索逻辑console.log(`搜索: ${query}`);}// 使用节流函数处理搜索输入const throttleSearch = throttle(search, 1000); // 设定延迟为500毫秒searchInput.addEventListener('keyup', function(event) {const query = event.target.value.trim();throttleSearch(query);});// 节流函数实现function throttle(func, delay) {let timerId;let lastExecuted = 0;return function(...args) {const now = Date.now();const timeSinceLastExecution = now - lastExecuted;if (timeSinceLastExecution >= delay) {func.apply(this, args);lastExecuted = now;} else {clearTimeout(timerId);timerId = setTimeout(() => {func.apply(this, args);lastExecuted = Date.now();}, delay - timeSinceLastExecution);}};}</script>
</body>
</html>

我们首先获取了搜索框的元素，并定义了一个 search 函数用于模拟搜索操作。然后，我们使用节流函数 throttle 对搜索函数进行包装，设定了一个1000毫秒的延迟。
接下来，监听搜索框的 keyup 事件，并获取用户输入的查询词。每次键盘释放时，会调用节流函数 throttleSearch，并将查询词作为参数传递给搜索函数 search。
在节流函数的实现中，记录了最后一次函数执行的时间戳，并根据设定的延迟来判断是否立即执行函数或设置定时器延迟执行函数。
当用户在搜索框中输入内容时，搜索请求会在一定的时间间隔内被触发，避免了频繁的搜索请求。

相关文章：

了解防抖和节流：提升前端交互体验的实用策略

了解防抖和节流&#xff1a;提升前端交互体验的实用策略 前言什么是防抖&#xff1f;什么是节流&#xff1f;应用实例防抖实例节流实例 前言 本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理&#xff0c;然后探讨了它们在前端开发中的应用场景&a…...

编程日记 2023/11/14 8:47:38

SQL学习之增删改查

文章目录 数据库数据类型建表create table插入数据insert into查询数据select from修改数据update set删除数据delete from备份ctas结果插入iis截断表 truncate table修改表结构alter table添加注释 注&#xff1a;本文的SQL语法是基于Oracle数据库操作的&#xff0c;但是基本的…...

编程日记 2023/11/14 8:46:38

Ansible角色定制实例

目录 角色定制&#xff1a;roles 角色定制实例&#xff1a;利用角色部署wordpress 1.在roles目录下生成对应的目录结构 2.定义配置文件 ①nginx ②php ③mysql ④定义剧本文件 ⑤启动服务 角色定制&#xff1a;roles 对于普通的剧本&#xff08;playbook&#xff09;有…...

编程日记 2023/11/14 8:45:37

ElastaticSearch--- es多字段聚合

在使用es时&#xff0c;我们经常会用到聚合查询。 简单的聚合查询&#xff0c;已经在前面介绍过&#xff0c;详情见&#xff1a; https://www.cnblogs.com/expiator/p/13843969.html 有时&#xff0c;也会用到多字段聚合查询。类似于Mysql的Group By多个字段。 比如&#xf…...

编程日记 2023/11/14 8:44:36

本周Github有趣开源项目：Rspress等6个

Github有趣的项目、工具和库&#xff1a; 1、sshx 一个基于 Web 的安全协作终端。通过网络进行快速、协作的实时终端共享 特征&#xff1a; 运行一个命令即可与任何人共享您的终端。 在无限画布上调整大小、移动窗口以及自由缩放和平移。 查看其他人的光标实时移动。 连接到…...

编程日记 2023/11/14 8:43:34

【华为OD题库-016】字符串摘要-Java

题目 给定一个字符串的摘要算法&#xff0c;请输出给定字符串的摘要值 1、去除字符串中非字母的符号 2、如果出现连续字符(不区分大小写)&#xff0c;则输出:该字符(小)&#xff0b;连续出现的次数 3、如果是非连续的宁符(不区分大小写)&#xff0c;则输出:该字符(小写)该字母之…...

编程日记 2023/11/14 8:42:33

生成式AI - Knowledge Graph Prompting：一种基于大模型的多文档问答方法

大型语言模型&#xff08;LLM&#xff09;已经彻底改变了自然语言处理&#xff08;NLP&#xff09;任务。它们改变了我们与文本数据交互和处理的方式。这些强大的AI模型&#xff0c;如OpenAI的GPT-4&#xff0c;改变了理解、生成人类类似文本的方式&#xff0c;导致各种行业出现…...

编程日记 2023/11/14 8:41:32

深度学习AIR-PolSAR-Seg图像数据预处理

文章目录 深度学习sar图像数据预处理一.图片预处理操作1.log(1x)处理2.sqrt平方化处理 二.原网络训练效果展示原始数据训练效果展示&#xff1a; 三.对比实验1.采用原始数据2.采用取log(1x)后的数据3.采用取平方后归一化处理&#xff1a; 四.总结&#xff1a;五.思考 深度学习s…...

编程日记 2023/11/14 8:40:32

求最大公约数math.gcd()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 求最大公约数 math.gcd() [太阳]选择题 下列代码执行输出的结果是&#xff1f; import math print("【执行】print(math.gcd(6, 8))") print(math.gcd(6, 8)) print(&quo…...

编程日记 2023/11/14 8:39:31

数据结构之队列

目录 引言 队列的概念与结构 队列的实现 定义 初始化 销毁 入队 判断队列是否为空 出队 获取队头元素 获取队尾元素 检测队列中有效元素个数 元素访问 源代码 queue.h queue.c test.c 引言 数据结构之路经过栈后&#xff0c;就来到了与栈联系紧密的兄弟—…...

编程日记 2023/11/14 8:38:30

MySQL数据库——存储过程-循环（while、repeat、loop）

目录 while 介绍 案例 repeat 介绍 案例 loop 介绍 案例一 案例二 while 介绍 while 循环是有条件的循环控制语句。满足条件后&#xff0c;再执行循环体中的SQL语句。具体语法为&#xff1a; -- 先判定条件&#xff0c;如果条件为true&#xff0c;则执行逻辑&#…...

编程日记 2023/11/14 8:37:29

Django路由

路由系统 1.Django1中的路由1.1 普通形式1.2 分组1.2.1 无名分组1.2.2 有名分组 2. Django2版本2.1 传统的路由2.2 正则表达式路由 3. 路由分发3.1 include(一般使用此方式做路由分发)3.2 手动分发 4. name别名及使用name的反向URL生成4.1 一般情况下的别名使用及反向生成4.2 分…...

编程日记 2023/11/14 8:36:28

头歌实践平台-数据结构-二叉树及其应用

第1关&#xff1a;实现二叉树的创建 #include "binary_tree.h"BiTreeNode* CreatBiTree(char* s, int &i, int len) // 利用先序遍历创建二叉树 // 参数&#xff1a;先序遍历字符串s&#xff0c;字符串初始下标i0&#xff0c;字符串长度len。 // 返回&#xff1…...

编程日记 2023/11/14 8:35:26

2023.11.11通过html内置“required-star“添加一个红色的星号来表示必填项

2023.11.11通过html内置"required-star"添加一个红色的星号来表示必填项 在HTML中&#xff0c;可以使用标签来为元素添加说明。同时可以通过添加一个红色的星号来表示必填项。 <!DOCTYPE html> <html lang"en"> <head><meta charse…...

编程日记 2023/11/14 8:34:25

pcie【C#】

根据提供的引用内容&#xff0c;使用C#编写PCIE的Demo需要遵循以下步骤&#xff1a;1.连接好硬件后&#xff0c;烧录bit文件&#xff0c;安装PCIe内核驱动&#xff0c;然后重启计算机。2.打开VS工程&#xff0c;创建一个新的C#控制台应用程序项目。3.在项目中添加对C DLL的引用…...

编程日记 2023/11/14 8:33:23

西门子精智屏数据记录U盘插拔问题总结

西门子精智屏数据记录U盘插拔问题总结 注意： 数据记录过程中不允许带电插拔 U 盘！ 数据记录的相关功能可参考以下链接中的内容： TIA博途wincc V16 如何进行变量周期归档？...

编程日记 2023/11/14 8:32:21

（论文阅读27/100）Deep Filter Banks for Texture Recognition and Segmentation

27.文献阅读笔记 简介 题目 Deep Filter Banks for Texture Recognition and Segmentation 作者 Mircea Cimpoi, Subhransu Maji, Andrea Vedaldi, 原文链接 http://www.cv-foundation.org/openaccess/content_cvpr_2015/papers/Cimpoi_Deep_Filter_Banks_2015_CVPR_pap…...

编程日记 2023/11/14 8:31:20

ARMday06(串口)

代码&#xff1a; #include "gpio.h" #include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h" #include "stm32mp1xx_uart.h" void init(); char getc(); void putc(const char data); int main() {init();//初始化putc(j);char …...

编程日记 2023/11/14 8:30:19

Rust字符串详解

文章目录 字符串切片String迭代方法基础字符串方法容量操作增删改查 字符串切片 我们所熟知的由双引号括起来的字符串&#xff0c;在Rust中只是个字符串切片&#xff0c;又叫字符串字面值。这种类型一旦创建&#xff0c;则不可更改。但支持索引&#xff0c;从切片中索引出来的…...

编程日记 2023/11/14 8:29:17

（四）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB

一、七种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA、GRO&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁殖…...

编程日记 2023/11/14 8:28:17

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

vscode（仍待补充）

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

编程新知 2025/9/21 6:27:04

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

编程新知 2025/7/12 22:48:51

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/9/16 7:41:25

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/9/1 23:52:40

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/9/20 8:25:47

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/9/9 23:27:37

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/9/18 10:34:36

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

编程新知 2025/9/18 12:51:36