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

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

news 2026/6/4 13:49:50

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

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

前言

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

什么是防抖？

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

什么是节流？

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

应用实例

防抖实例

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

<!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

为什么92%的Sora 2初学者卡在第4步？——帧一致性崩塌诊断工具包+时间轴锚点校准法

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Sora 2视频生成的核心原理与环境准备 Sora 2并非OpenAI官方发布的模型&#xff0c;而是社区基于Sora技术理念构建的开源复现与增强框架&#xff0c;其核心依托于时空联合建模的扩散变换器&#xff08;Spacetim…...

编程新知 2026/5/26 5:04:27

混合求解器：用神经网络增强传统微分方程数值方法

1. 项目概述&#xff1a;当数值方法遇到机器学习在科学计算和工程仿真领域&#xff0c;求解常微分方程&#xff08;ODE&#xff09;和偏微分方程&#xff08;PDE&#xff09;是绕不开的核心任务。无论是模拟电路中的电流变化、预测天气系统的演变&#xff0c;还是分析机械结构的…...

编程新知 2026/5/26 3:30:08

蓝牙抓包不求人：从HCI日志里‘挖’出Link Key的两种实用方法（附安卓路径）

蓝牙安全逆向实战&#xff1a;从HCI日志中提取Link Key的深度解析在蓝牙协议安全研究领域&#xff0c;Link Key作为设备配对认证的核心凭证&#xff0c;其获取方式一直是逆向工程师关注的焦点。许多安全审计场景下&#xff0c;我们往往只能获得加密后的HCI通信日志&#xff0c;…...

编程新知 2026/5/26 3:17:59

BurpSuite 2025插件开发JDK版本兼容性实战指南

1. 为什么BurpSuite插件开发环境总在JDK版本上翻车&#xff1f;你是不是也经历过&#xff1a;下载好BurpSuite最新版2025.4&#xff0c;兴冲冲打开插件开发文档&#xff0c;照着官方示例写完第一个HelloWorld插件&#xff0c;一编译——java.lang.UnsupportedClassVersionError…...

编程新知 2026/5/26 1:39:10

从入门到实践：EEG公开数据集分类与应用场景全解析

1. EEG公开数据集入门指南刚接触脑电信号分析的研究者&#xff0c;常常会被一个问题困扰&#xff1a;"我应该从哪里获取可靠的EEG数据&#xff1f;"作为一个在这个领域摸爬滚打多年的研究者&#xff0c;我完全理解这种困惑。记得我第一次接触EEG研究时&#xff0c;光…...

编程新知 2026/5/26 1:09:00

新能源车轻量化为什么开始盯上高强镁合金？

续航&#xff0c;是悬在每一台纯电动汽车头上的达摩克利斯之剑。多充一度电、多堆一些正极材料&#xff0c;是一条路&#xff1b;但还有另一条路——把车造得更轻。 SAE&#xff08;美国汽车工程师学会&#xff09;的测算已经被反复引用&#xff1a;整车每减重100千克&#xff…...

编程新知 2026/5/26 0:32:21

神经网络与深度学习 第3周课程总结

深度学习视觉应用课程总结 一、常用计算机视觉数据集数据集名称发布方/年份规模图像规格类别数主要用途核心特点MNIST美国国家标准与技术研究院60k训练10k测试2828灰度图10类(0-9手写数字)入门级图像分类最经典的手写数字识别基准数据集Fashion-MNISTZalando(2017)60k训练10k测…...

编程新知 2026/5/25 23:20:56

Performance-Fish：让你的《环世界》后期游戏帧率提升400%的终极优化方案

Performance-Fish&#xff1a;让你的《环世界》后期游戏帧率提升400%的终极优化方案 【免费下载链接】Performance-Fish Performance Mod for RimWorld 项目地址: https://gitcode.com/gh_mirrors/pe/Performance-Fish 你是否曾在《环世界》游戏后期&#xff0c;面对庞大…...

编程新知 2026/5/25 21:29:49

GIS工程应用记录（AI辅助编程）

问题的问题&#xff1a;语境坍缩“从各个角度提出问题&#xff0c;AI做出对应积极答复和修改&#xff0c;结果没有什么变化。”这&#xff0c;就是元问题最核心的症状。你尝试了所有你已知的“高级”协作手段&#xff0c;但就像重拳打在棉花上&#xff0c;AI永远在积极回应&…...

编程新知 2026/5/25 21:19:36

1688运营培训/询盘成本从500元降到63.9！1688运营培训还原1688真实玩法

1688运营培训/询盘成本从500元降到63.9&#xff01;1688运营培训还原1688真实玩法500块钱一个询盘&#xff0c;你敢信&#xff1f;做1688运营培训这么多年&#xff0c;这个数字我都觉得离谱。前阵子遇到一个老板&#xff0c;一上来就开始吐槽1688&#xff0c;说1688就是个垃圾平…...

编程新知 2026/5/25 21:15:34